Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
2 / 2 / 3
Регистрация: 15.05.2015
Сообщений: 43
1

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

06.09.2015, 02:24. Просмотров 702. Ответов 2
Метки нет (Все метки)

Добрый вечер, подскажите, как организовать смену слайдов на сайте по времени суток? Нашел скрипт
Javascript
1
2
3
4
5
6
7
8
9
10
<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
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.09.2015, 02:24
Ответы с готовыми решениями:

Смена фона в зависимости от времени суток
Помогите разобраться,почему не работает &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;content-type&quot;...

Подскажите как интегрировать скрипт смены слайдов по времени в уже готовый слайдер
Добрый день. Подскажите как интегрировать скрипт смены слайдов в уже готовый слайд. Имеется...

Как изменить посещаемость в фэйковом счетчике посещений в зависимости от времени суток?
Всем Привет! Подскажите, пожалуйста кто знает, как прописать в нижеприведенном фэйковом...

Смена фона по заданному времени
Как сменить фон по заданному времени Есть скрипт времени ...

2
2 / 2 / 3
Регистрация: 15.05.2015
Сообщений: 43
07.09.2015, 16:54  [ТС] 2
Немного поменял условия, подскажите как теперь добавить анимацию данному скрипту?
HTML5
1
2
3
<div class="morning" id="morning"> </div>
<div class="day" id="day"> </div>
<div class="night" id="night"> </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.morning {
    height: 100px;
    width: 100px;
    background: #000;
}
.day {
    height: 100px;
    width: 100px;
    background: green;
}
.night {
    height: 100px;
    width: 100px;
    background: blue;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>
0
433 / 352 / 259
Регистрация: 29.11.2011
Сообщений: 627
07.09.2015, 23:56 3
Например так: http://jsfiddle.net/21az3pn9/10/

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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);
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.09.2015, 23:56

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Смена картинок по определеному времени
Всем привет я создаю сайт. На нем выводяться часы и фон должен меняться по определеному времени от...

Смена фоновой картинки сайта по времени
Всем привет! есть 3 картинки img\1.jpg; img\2.jpg; img\3.jpg Как по средствам javascript...

Смена изображений при клике, по заданному времени
1)Как сделать смену картинки при клике на неё? Допустим, у меня стоит картинка мотоцикла. Хочу...

Смена текста в зависимости от дня недели и времени
Всем доброго дня. Есть необходимость выводить текст в зависимости от дня недели и времени что то...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.