javascript 带有控件和自动滚动的 jquery 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19068652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery slider with controls and automatic scrolling
提问by Serge Eremeev
Basically I am just trying to do random jQuery stuff for educational purpose, and here is my very simple slider. I want it to work automatically and also with controls (little arrows to scroll to next/previous slider). The only problem that I have right now is that when you press the arrow, the function that automatically switches slides every 5 seconds is still counting these 5000 ms, so the next slide appears faster then desired. What I want is to make those arrows reset the timer, so you press the arrow -> next slide appears -> only after 5 seconds later the slide switches again. Sorry for sloppy explanation, hope I made it clear enough.
基本上我只是为了教育目的而尝试做一些随机的 jQuery 东西，这是我非常简单的滑块。我希望它可以自动工作，也可以使用控件（小箭头滚动到下一个/上一个滑块）。我现在唯一的问题是，当您按下箭头时，每 5 秒自动切换幻灯片的功能仍在计算这 5000 毫秒，因此下一张幻灯片出现的速度比所需的要快。我想要的是让这些箭头重置计时器，因此您按下箭头 -> 出现下一张幻灯片 -> 仅在 5 秒后再次切换幻灯片。抱歉草率的解释，希望我说得足够清楚。
Here's the jsfiddle: http://jsfiddle.net/cA9aW/
这是 jsfiddle：http: //jsfiddle.net/cA9aW/
and here is the code
这是代码
HTML
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
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);
});
}
});
Thx a lot in advance
提前很多
采纳答案by PSL
What you need to do it to clear the interval in the button clicks and start interval again.
您需要做什么来清除按钮单击中的间隔并再次开始间隔。
function resetInterval(){ //add this method which wil reset the timer
window.clearInterval(looper); //clear current interval
looper = setInterval(autoSlide, 5000); //start auto slide again.
}
function autoSlide(){ //move this to a function from being anonymous
// 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);
}
}
and
和
$('.control_left').on('click', function () {
resetInterval(); //reset it
....
$('.control_right').on('click', function () {
resetInterval(); //reset it
....
回答by Roko C. Buljan
HTML:
HTML：
<div id="gallery">
<div id="slider">
<div><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></div>
<div><img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt=""></div>
<div><img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt=""></div>
</div>
<span id="prev"></span>
<span id="next"></span>
</div>
CSS:
CSS：
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:278px;
}
#slider{
position:absolute;
left:0;
height:278px;
}
#slider > div {
position:relative;
float:left;
width:500px;
height:278px;
}
#slider > div img{
width:100%;
}
/* buttons */
#gallery > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#next{
right:0px;
}
#gallery > span:hover{
opacity:1;
}
jQ:
简问：
jQuery(function($) {
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0, // a counter
intv;
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
function auto(){
intv = setInterval(function(){
$('#next').click();
}, 3000);
}
auto(); // start
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
});
