jQuery - 使用计时器更改类

jQuery - change class with timer

本文关键字：计时器 jQuery      更新时间：2023-09-26

我有一个CSS滑块，我正在使用它与一些jQuery一起使用，以在单击时更改列表项的类。我还想让滑块放在计时器上，这样它每 5 秒就会自动执行所选列表项的 removeClass，如果没有用户交互，则将"选定"类添加到列表中的下一个列表项。

在更改 li 元素上的类的同时，它需要将 #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");
  });
 });
});

感谢您:)的任何帮助。

我有一个工作旋转器的例子。当没有用户交互时，它将每 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);
    }
});

普伦克：https://plnkr.co/edit/ah1CTexSjnROAEPMAitk?p=preview

要延迟执行某些内容，您可以使用 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')

看看这个代码片段。

$(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);
}

您应该首先设置一个间隔，一旦您的用户进行了交互，您就可以使用 clearInterval 清除该间隔。这是一个伪代码：

var interval = setInteval(function(){
  // do whatever here...
}, 5000);
$('yourSelector').click(function(){
  clearInterval(interval);
  // do whatever....
});
相关文章：