Question

基本上我只是想为教育目的做随机jQuery的东西，这是我非常简单的滑块。我想让它自动工作，也可以使用控件（小箭头滚动到下一个/上一个滑块）。我现在唯一的问题是，当你按下箭头时，每5秒自动切换一次幻灯片的功能仍在计算这5000毫秒，所以下一张幻灯片显示得比预想的要快。我想要的是让那些箭头重置计时器，所以你按箭头 - ＆gt;下一张幻灯片出现 - ＆gt;仅在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);
});



}

});

提前很多

Answer 1

<强> LIVE DEMO

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：

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

});

Answer 2

您需要做什么来清除按钮点击的间隔并再次开始间隔。

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
....

<强> Demo

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

2 个答案: