jQuery滑块计时器 [英] Jquery Slider Timer

问题描述

我需要使用jquery为网站创建自定义滑块.到目前为止，如果单击按钮，我已经设法使其表现出想要的方式，但是我想实现一个自动计时器，这样幻灯片将在5秒钟后切换.

I need to create a custom slider for a website using jquery. So far, I've managed to make it behave the way I want it if I click a button, but I would like to implement an automatic timer, so that the slides will switch after 5 seconds.

这是我的JS代码:

function MasterSlider() {
    //store the current button ID
    var current_button = $(this).attr('id');

    //reset all the items
    $('#slider ul a').removeClass('slider-button-active');         
    //set current item as active
    $(this).addClass('slider-button-active');


    //scroll it to the right position
    $('.mask').scrollTo($(this).attr('rel'), 850);


    //Check which button is pressed and fade the text accordingly
    if(current_button == "slider_item1")
    {
        $('#slider h3').fadeOut().removeClass('caption_active');
        $('#slider_caption1').fadeIn().addClass('caption_active');
    }
    else if(current_button == "slider_item2")
    {
        $('#slider h3').fadeOut().removeClass('caption_active');
        $('#slider_caption2').fadeIn().addClass('caption_active');
    }
    else if(current_button == "slider_item3")
    {
        $('#slider h3').fadeOut().removeClass('caption_active');
        $('#slider_caption3').fadeIn().addClass('caption_active');      
    }

    //disable click event
       return false;      
}

//append click event to the UL list anchor tag
$('#slider ul a').click(MasterSlider);

提前谢谢！

推荐答案

您可以在setInterval的a元素上动态触发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函数就会循环
• 暂停事件会检测画廊中的事件mouseenter和mouseleave，并使用三元运算符执行以下操作:
• 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
});

这篇关于jQuery滑块计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！