Jquery 滑块计时器 [英] Jquery Slider Timer
本文介绍了Jquery 滑块计时器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要使用 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 代码:
Here is my JS code:
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()
代码>!
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
函数就会循环 - PAUSE 检测您的图库中的事件
mouseenter
和mouseleave
并使用三元运算符来执行: - Thanks to
current++%slN
theauto
function will loop once the last button is triggered - The PAUSE thing detects events
mouseenter
andmouseleave
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屋!
查看全文