带控件和自动滚动的jquery滑块

基本上我只是想为教育目的做随机jQuery的东西，这是我非常简单的滑块。 我希望它能够自动工作，也可以使用控件（小箭头滚动到下一个/上一个滑块）。 我现在唯一的问题是，当你按下箭头时，每5秒自动切换一次幻灯片的function仍在计算这5000毫秒，所以下一张幻灯片显示得比预想的要快。 我想要的是让这些箭头重置计时器，所以你按箭头 – >下一张幻灯片出现 – >仅在5秒后滑动再次切换。 对不起草率的解释，希望我说得够清楚。

这是jsfiddle： http ： //jsfiddle.net/cA9aW/

这是代码

HTML

 
 
 
Simplest Sliding Image Slider
 
 
 
 
 
  
 
  
 
  
 
 
 
 
 
  

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

很多提前

Answer 1

您需要做什么来清除按钮单击的间隔并再次启动间隔。

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

和

  $('.control_left').on('click', function () { resetInterval(); //reset it .... $('.control_right').on('click', function () { resetInterval(); //reset it .... 

演示

Answer 2

现场演示

HTML：

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