Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2018, 14:27
Новичок на форуме
Отправить личное сообщение для Lexx85 Посмотреть профиль Найти все сообщения от Lexx85
 
Регистрация: 18.04.2018
Сообщений: 1

Создание слайдера
Всем здравствуйте!
В программировании не силен, поэтому прошу указать мою ошибку.
Задача: создать слайдер из нескольких картинок, при наведении на который картинки приостанавливает свое исчезновение/появление. Написал код, который работает нормально. Однако случайно обнаружил, что, если при смене последней картинки на первую навести курсор мыши, то слайдер приостанавливает работу, а при отведении возобновляет свою работу только при повторном выполнении функции SlideRotate(), т.е. через 12 сек (4 картинки в слайдере, смена которых происходит через каждые 3 сек). Надеюсь, что не коряво объяснил. Буду благодарен за помощь!
<div id="slider">
<ul>
<li><a href="#"><img src="img/HomePage/01-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
<li><a href="#"><img src="img/HomePage/02-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
<li><a href="#"><img src="img/HomePage/03-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
<li><a href="#"><img src="img/HomePage/04-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
</ul>
</div>

var SliderImg = 4; /*общее количество картинок в слайдере*/
var NumberSlider =1; /*текущая картинка в слайдере*/
function TheSlide() {
    $('#slider ul li').hide(); /*скрыть все картинки из слайдера*/
    $('#slider ul li:nth-child('+NumberSlider+')').fadeIn(200); /*показать картинку с номером NumberSlider*/
    var id = setInterval(SlideRotate,3000);
    $('#slider ul li').hover(
function(){$(this).stop().fadeTo(200, 0.7); clearInterval(id)},
function(){$(this).stop().fadeTo(200, 1); id = setInterval(SlideRotate,3000)});
};
function SlideRotate() {
    $('#slider ul li:nth-child('+NumberSlider+')').fadeOut(1000);
    NumberSlider = (NumberSlider < SliderImg) ? (NumberSlider + 1) : 1;
    $('#slider ul li:nth-child('+NumberSlider+')').fadeIn(1000);
};

Последний раз редактировалось Lexx85, 18.04.2018 в 15:29. Причина: По просьбе
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание, продвижение и оптимизация сайта Evgenij83 Работа 0 10.06.2017 17:23
Как организовать два слайдера по принципу обложка-внутренние страницы? helgajijka jQuery 4 06.09.2015 13:52
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 15:56
Создание своей библиотеки. Создание двух одинаковых объектов. Как избежать? IDCh Javascript под браузер 2 31.10.2012 12:53
Создание скрипта! Создание диктанта для учеников! Елизавета Работа 10 30.06.2010 21:00