【发布时间】：2013-09-28 15:41:02
【问题描述】：
基本上我只是为了教育目的而尝试做一些随机的 jQuery 东西，这是我非常简单的滑块。我希望它能够自动工作并且还可以使用控件（小箭头滚动到下一个/上一个滑块）。我现在唯一的问题是，当您按下箭头时，每 5 秒自动切换幻灯片的功能仍在计算这 5000 毫秒，因此下一张幻灯片出现的速度比预期的要快。我想要的是让这些箭头重置计时器，所以你按下箭头->下一张幻灯片出现->仅在 5 秒后幻灯片再次切换。 对不起，草率的解释，希望我说得足够清楚。
这是 jsfiddle：http://jsfiddle.net/cA9aW/
这是代码
HTML
<body>
<div id="wrapper">
<header>
<h1>Simplest Sliding Image Slider</h1>
</header>
<div id="content">
<div id="slider_container">
<div id="slider">
<div class="slides" id="slide1">
<img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" />
</div>
<div class="slides" id="slide2">
<img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" />
</div>
<div class="slides" id="slide3">
<img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" />
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
JS
jQuery(document).ready(function($) {
// start slider function
startSlider();
// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');
// actual function
function startSlider() {
looper = setInterval(function() {
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
// return to first slide after the last one
if($('.active').length == 0) {
$('#slide1').addClass('active');
$('.slides').animate({'left': 0}, 500);
}
}, 5000); // interval
// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");
// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
// add functionality to controls
$('.control_left').on('click', function() {
$('.active').removeClass('active').prev().addClass('active');
$('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500);
});
$('.control_right').on('click', function() {
$('.active').removeClass('active').next().addClass('active');
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
});
}
});
提前多谢
【问题讨论】：
-
您想在每次点击按钮时重置它并重新开始，对吗？
-
这不是构建滑块的正确方法（也不是最简单的方法），只需使用 2 个按钮，而不是到处放置按钮
-
我意识到这远非完美，但只想先做一个简单的滑块，解决我遇到的所有问题。现在我会尝试打磨它，让它变得更好，然后尝试一些更高级的东西。
标签： javascript jquery slider