jquery滑塊控件和自動滾動

基本上，我只是想爲教育目的做隨機jQuery的東西，這裏是我非常簡單的滑塊。我希望它可以自動工作，也可以使用控件（小箭頭滾動到下一個/上一個滑塊）。我現在唯一的問題是，當你按下箭頭時，每5秒自動切換一次滑動的功能仍然計算這5000毫秒，所以下一張幻燈片顯得更快，然後是所需的。我想要的是讓這些箭頭重置計時器，所以您按下箭頭 - >下一張幻燈片出現 - >僅在5秒後幻燈片再次切換。對不起，馬虎的解釋，希望我說得夠清楚。jquery滑塊控件和自動滾動

這裏的的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>

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很多提前

來源

2013-09-28 Serge Eremeev

要重置它在每個按鈕點擊startover再次對不對？ – PSL

這不是正確的（也不是最簡單的）構建滑塊的方法，只是使用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

來源

2013-09-28 15:46:18 PSL

非常感謝您的回答，真的幫助了我。 –

@SergeEremeev不客氣... – PSL

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

});

來源

2013-09-28 16:22:46

感謝您的回答，這是非常不同的，但很高興看到針對同一問題的不同方法。你的解決方案有一個問題 - 當你在第一張幻燈片上按下左邊的跨度時，整個事情就會中斷。 –

@SergeEremeev哦，你是對的，有一個小錯誤，修復。 :) –

jquery滑塊控件和自動滾動

回答

相關問題