我有一个 CSS slider ，我使用它和一些 jQuery 来更改单击时列表项的类。我还希望在计时器上设置 slider ，以便每 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);
}
});
关于javascript - jQuery - 使用计时器更改类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35014948/