单击jQuery滑块 [英] jQuery slider on click
本文介绍了单击jQuery滑块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当您单击滑块时,我想使它起作用.我怎样才能做到这一点?这是代码: http://jsfiddle.net/EjZzs/15/
I want to make this slider do it's work when you click the slider. How can I do this? This is the code: http://jsfiddle.net/EjZzs/15/
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
推荐答案
将执行滑动操作的代码移至其自身的功能,然后从setInterval并单击以下命令进行调用:
Move the code that does the sliding to its own function, and call that from the setInterval and on a click:
function startSlider() {
interval = setInterval(slide, pause);
}
function slide() {
$slideContainer.animate({
'margin-left': '-=' + width
}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider)
.on('click', slide);
这篇关于单击jQuery滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文