Смена слайдов по времени суток

@Xenitron · Регистрация: 15.05.2015

Author24 — интернет-сервис помощи студентам

Добрый вечер, подскажите, как организовать смену слайдов на сайте по времени суток? Нашел скрипт

Javascript

<script>
    var now = new Date();
    var hours = now.getHours();
    if(hours >= 8 && hours <= 22){
        $('.that-background-class').addClass('night');
    }
    else{
        $('.that-background-class').removeClass('night');
    }
</script>

, но он меняет только стили, а нужно чтобы листались слайды. Заранее благодарен.
Ссылка на сайт proweblog. ru/gigemot

@Xenitron · 07.09.2015, 16:54 **[ТС]**

Немного поменял условия, подскажите как теперь добавить анимацию данному скрипту?

HTML5

1
2
3

<div class="morning" id="morning"> </div>
<div class="day" id="day"> </div>
<div class="night" id="night"> </div>

CSS

.morning {
    height: 100px;
    width: 100px;
    background: #000;
}
.day {
    height: 100px;
    width: 100px;
    background: green;
}
.night {
    height: 100px;
    width: 100px;
    background: blue;
}

Javascript

var now = new Date();
var hours = now.getHours();
if(hours >= 20 && hours <= 5){
    document.getElementById( 'night' ).style.display = 'block';
}
if(hours >= 5 && hours <= 10){
    document.getElementById( 'morning' ).style.display = 'block';
}
if(hours >= 10 && hours <= 17){
    document.getElementById( 'day' ).style.display = 'block';
}
if(hours >= 17 && hours <= 20){
    document.getElementById( 'morning' ).style.display = 'block';
}

Ссылка на демо http://jsfiddle.net/21az3pn9/2/

Скрипт с анимацией(там по клику, а нужно чтобы по тем условиям что выше)

HTML5

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      #myDiv {
        background: #000;
        height: 100px;
        width: 100px;
        transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -webkit-transition: opacity 0.5s;
      }
      .hide {
          opacity: 0;
      }
    </style>
  </head>
  
  <body>
    <div id="myDiv"></div>
    
    <script>
      var myDiv = document.getElementById('myDiv').onclick = function() {
        var hide = this.classList.contains('hide');
        this.classList[hide ? 'remove' : 'add']('hide');
      }
    </script>
  </body>
 
</html>

@Vadim_Lasso · 07.09.2015, 23:56

Например так: http://jsfiddle.net/21az3pn9/10/

Javascript

slider = $('.slider').bxSlider({
    slideWidth: 100,
    minSlides: 1,
    maxSlides: 1,
    slideMargin: 10,
    pager: false,
    controls: false
});
 
var showSlider = false;
 
setInterval(function() {
    hours = sliderTime(slider);
    if (showSlider)
        $(".slider").css("visibility", "visible");
    showSlider = true;
    $(".hours").text("hours = " + hours);
}, 1000);
 
function sliderTime(slider) {
    var date = new Date();
    var hours = date.getHours();
    //var hours = Math.round((date.getSeconds() / 0.6) * 0.24); // для ускоренного просмотра работы скрипта
    
    console.log(hours);
    
    if (hours >= 5 && hours < 10)
        slider.goToSlide(0);
    else if (hours >= 10 && hours < 17)
        slider.goToSlide(1);
    else if (hours >= 17 || hours < 5)
        slider.goToSlide(2);
    return hours;
}

Чтобы часами не дожидаться, пока произойдет смена слайда, можно для теста раскоментировать строку:

Javascript

1	var hours = Math.round((date.getSeconds() / 0.6) * 0.24);

	07.09.2015, 23:56