且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery滑块计时器

更新时间:2023-11-17 17:06:40

您可以在setIntervala元素上动态触发click()

You can dynamically trigger click() on your a elements in a setInterval !

var intv;
var current = 0;  // STARTING SLIDE(<li>element button) INDEX
var slN = $('#slider li').length; // get number of slides(buttons.. all the same)


 // your function here with
 // clearInterval(intv);
 // in the second line.
 // In third line put:
 // current = $(this).closest('li').index();

// AUTO SLIDE

function auto(){
   intv = setInterval(function() {
        $('#slider ul li').eq( current++%slN  ).find('a').click();
   }, 5000 );       
}
auto(); // to start immediately auto-slide

// PAUSE ON MOUSEOVER

$('#slider').on('mouseenter mouseleave', function( e ){
    var onMouEnt = e.type=='mouseenter' ? clearInterval(intv) : auto() ;
});

  • 感谢current++%slN,一旦触发了最后一个按钮,auto函数就会循环
  • 暂停事件会检测画廊中的事件mouseentermouseleave,并使用三元运算符执行以下操作:
    • Thanks to current++%slN the auto function will loop once the last button is triggered
    • The PAUSE thing detects events mouseenter and mouseleave over your gallery and uses a ternary operator to do:
$('#slider').on('mouseenter mouseleave', function( e ){ // catch eVENT
    var onMouEnt = e.type=='mouseenter' ?  // if e IS mouseenter
                   clearInterval(intv) :   // clear autoslide interval
                   auto() ;                // else (is mouseleave) run 'auto' fn
});