Question

我有一个CSS滑块，我正在使用一些jQuery来更改单击列表项的类。我还希望将滑块放在计时器上，这样每5秒它会自动执行所选列表项的removeClass并添加＆＃34;选择＆＃34;如果没有用户交互，则列到列表中的下一个列表项。

在更改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");
  });
 });

});

感谢您的帮助:)。

Answer 1

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

Answer 2

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

Answer 3

看看这个代码片段。

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

Answer 4

您应该从setting an interval开始，一旦您的用户进行了互动，您就可以使用clearInterval清除该时间间隔。这是一个伪代码：

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

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

jQuery - 使用计时器

4 个答案: