jQuery - изменить класс с таймером

У меня есть слайдер CSS, который я использую с немного jQuery, чтобы изменить класс элемента списка при щелчке. Я также хотел бы иметь слайдер на таймере, поэтому каждые 5 секунд он автоматически выполняет удаление класса выбранного элемента списка и добавляет «выбранный» класс в следующий элемент списка в списке, если нет взаимодействия с пользователем.jQuery - изменить класс с таймером

В то же время, как изменения класса на литиево элемент его необходимо изменить #slide_images преобразования к тому, что она должна быть (0px, 1100px, 2200px, 3300px или 4400px) и т.д.

Если это делает пользовательское взаимодействие через них, выбирая ссылку для слайда, тогда таймер должен остановиться до перезагрузки страницы.

Вот HTML:

<div id="slide_container"> 
<div style="transform: translateX(0px);" id="slide_images"> 

<div class="slide1"> 
<img src="http://example.com/1.jpg"> 
<div class="slide-content1"> 
slide1content 
</div> 
</div> 
<div class="slide2"> 
<img src="http://example.com/2.jpg"> 
<div class="slide-content2"> 
slide1content 
</div> 
</div> 
<div class="slide3"> 
<img src="http://example.com/3.jpg"> 
<div class="slide-content3"> 
slide1content 
</div> 
</div> 

</div> 
</div>

Вот CSS:

.slide-content1,.slide-content2,.slide-content3,.slide-content4,.slide-content5{position:absolute;top:20px;left:0;padding:110px 0 0;width:1100px;color:#fff} 
.slide-content2{left:1100px} 
.slide-content3{left:2200px} 
.slide-content4{left:3300px} 
.slide-content5{left:4400px} 
#slide_container{width:1100px;height:580px;overflow:hidden;margin:0 auto} 
#slide_images{width:5500px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out} 
#slide_images img{padding:0;margin:0;float:left;border:none}

Вот сценарий:

jQuery(document).ready(function($) { 

$(document).ready(function() { 
    $('.slidenav').on('click', 'li', function(){ 
    $("#slide_images").css("transform","translateX("+$(this).index() * -1100+"px)"); 
    $(".slidenav li").removeClass("selected"); 
    $(this).addClass("selected"); 
    }); 
}); 

});

Спасибо за любую помощь :).

источник

2016-01-26 d1ch0t0my

У меня есть пример с рабочим ротатором. Он будет вращаться каждые 5 секунд, когда нет взаимодействия с пользователем. Когда вы нажимаете на элемент, таймер сбрасывается до 0 и продолжается через 5 секунд с вращением.

HTML: 

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <ul class="slidenav"> 
     <li>slide1</li> 
     <li>slide2</li> 
     <li>slide3</li> 
    </ul> 
    </body> 

</html>

CSS:

ul.slidenav li { 
    color: #000; 
} 
ul.slidenav li.selected { 
    color: red; 
}

JS:

$(document).ready(function() { 

    var slides = $(".slidenav li"); 

    //Init slide 1 
    slideTo(slides[0]); 

    var slideIndex = 0; 
    var slideTime = animate(); 

    $(".slidenav li").click(function() { 
     //Reset the interval to 0 and start it again 
     clearInterval(slideTime); 
     slideTime = animate(); 


     var selectedIndex = $(this).index(); 
     var slide = slides[selectedIndex]; 
     slideTo(slide); 

    }); 

    function slideTo(slide) { 
     $(".slidenav li").removeClass("selected"); 
     $(slide).addClass("selected"); 
     slideIndex = jQuery(slide).index(); 
    } 

    function animate() { 
     return setInterval(function() { 
       var slide = slides[slideIndex]; 
       slideTo(slide) 
       slideIndex++; 
       if (slideIndex == slides.length) { 
        slideIndex = 0; 
       } 
      }, 5000); 
    } 

});

Plunker: https://plnkr.co/edit/ah1CTexSjnROAEPMAitk?p=preview

источник

2016-01-26 14:07:22 com2ghz

Прошу прощения, я дал бесполезное описание. Вы можете увидеть мое обновленное описание и код. Ваш ответ кажется идеальным для меня, мне просто нужно приспособить его, чтобы он соответствовал мне. Спасибо! – d1ch0t0my

Вы можете применить свой код к примеру, который я дал. Это не значит, что я делаю домашнее задание, но помогая вам найти правильный путь. – com2ghz

Спасибо, я попробую попробовать, хотя, похоже, я использую jQuery для слайда, а не для преобразования css, как я этого хотел. Я постараюсь найти путь через него, ура. – d1ch0t0my

Чтобы выполнить что-то с задержкой, вы можете использовать setTimeout(). Вы можете использовать переменную delayTime, а затем изменить ее на событие клика пользователя. Быстрый подход к решению будет

var delayTime = 5000; // milliseconds 
$(function() { 
    $('.slidenav').click(function() { 
    setTimeout(function() { 
     $('.slidenav li').removeClass('newClass'); 
    }, delayTime); 
    }); 
    $('.clickedLink').click(function() { 
    delayTime = 0; 
    }); 
});

Заметьте, я также сократил код немного: $(ready) и .on('click')

источник

2016-01-26 13:48:27 jack

Взгляните на эту codesnippet.

$(document).ready(function(){ 
     $(".slider li:first-child").addClass("active"); 
     setTimeout(autoAddClass, 1000); 
}); 

function autoAddClass(){ 
    var next = $(".active").removeClass("active").next(); 
    if(next.length) 
     $(next).addClass('active'); 
    else 
     $('.slider li:first-child').addClass('active'); 
    setTimeout(autoAddClass, 1000); 
}

источник

2016-01-26 13:48:59

Вы должны начать с setting an interval, и как только ваш пользователь делает его взаимодействие, вы можете удалить, что промежуток используя clearInterval. Вот псевдокод:

var interval = setInteval(function(){ 
    // do whatever here... 
}, 5000); 

$('yourSelector').click(function(){ 
    clearInterval(interval); 
    // do whatever.... 
});

источник

2016-01-26 15:03:21

jQuery - изменить класс с таймером

ответ

Смежные вопросы