值小于4时,继续执行jQuery循环,以1重新尝试使用jQuery制作滑块。但它正在加载而没有得到响应。
$(document).ready(function(e) {
$('.slide:nth-child(2)').css('display','none');
$('.slide:nth-child(3)').css('display','none');
$('.slide:nth-child(4)').css('display','none');
$('.list ul li:nth-child(1)').click(function(e){
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display','none');
$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display','none');
$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display','none');
$('.list ul li:nth-child(1)').addClass('active');
$('.slide:nth-child(1)').fadeIn( 500, function(){
$('.slide:nth-child(1)').css('display','block');
});
});
$('.list ul li:nth-child(2)').click(function(e){
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display','none');
$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display','none');
$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display','none');
$('.list ul li:nth-child(2)').addClass('active');
$('.slide:nth-child(2)').fadeIn( 500, function(){
$('.slide:nth-child(2)').css('display','block');
});
});
$('.list ul li:nth-child(3)').click(function(e){
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display','none');
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display','none');
$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display','none');
$('.list ul li:nth-child(3)').addClass('active');
$('.slide:nth-child(3)').fadeIn( 500, function(){
$('.slide:nth-child(3)').css('display','block');
});
});
$('.list ul li:nth-child(4)').click(function(e){
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display','none');
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display','none');
$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display','none');
$('.list ul li:nth-child(4)').addClass('active');
$('.slide:nth-child(4)').fadeIn( 500, function(){
$('.slide:nth-child(4)').css('display','block');
});
});
var timeset;
timeset = setTimeout(
function() {
for (var i = 1; i <= 5; i++) {
if (i > 4) {
var i = 1;
}
$('.list ul li:nth-child(' + i + ')').click();
}
}, 3000);
clearTimeout(timeset);
});
如您现在所见,我将完整的代码放在这里,以便您查看代码。
您已经调用了setTimeout()函数,并通过调用clearTimeout()函数来阻止立即执行。因此它将不起作用。
编辑
通过评论进行交流之后,我想出了一个解决方案。我想,您的要求是每3秒滑动一次图像/格。
<script>
$(document).ready(function(e) {
$('.slide:nth-child(2)').css('display','none');
$('.slide:nth-child(3)').css('display', 'none');
$('.slide:nth-child(4)').css('display', 'none');
$('.list ul li:nth-child(1)').click(function (e) {
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display', 'none');
$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display', 'none');
$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display', 'none');
$('.list ul li:nth-child(1)').addClass('active');
$('.slide:nth-child(1)').fadeIn(500, function () {
$('.slide:nth-child(1)').css('display', 'block');
});
});
$('.list ul li:nth-child(2)').click(function (e) {
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display', 'none');
$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display', 'none');
$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display', 'none');
$('.list ul li:nth-child(2)').addClass('active');
$('.slide:nth-child(2)').fadeIn(500, function () {
$('.slide:nth-child(2)').css('display', 'block');
});
});
$('.list ul li:nth-child(3)').click(function (e) {
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display', 'none');
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display', 'none');
$('.list ul li:nth-child(4)').removeClass('active');
$('.slide:nth-child(4)').css('display', 'none');
$('.list ul li:nth-child(3)').addClass('active');
$('.slide:nth-child(3)').fadeIn(500, function () {
$('.slide:nth-child(3)').css('display', 'block');
});
});
$('.list ul li:nth-child(4)').click(function (e) {
$('.list ul li:nth-child(1)').removeClass('active');
$('.slide:nth-child(1)').css('display', 'none');
$('.list ul li:nth-child(2)').removeClass('active');
$('.slide:nth-child(2)').css('display', 'none');
$('.list ul li:nth-child(3)').removeClass('active');
$('.slide:nth-child(3)').css('display', 'none');
$('.list ul li:nth-child(4)').addClass('active');
$('.slide:nth-child(4)').fadeIn(500, function () {
$('.slide:nth-child(4)').css('display', 'block');
});
});
// Starting to slide (in each 3 seconds)
var seconds = 3;
var i = 1;
setTimeout(function () {
slide();
}, seconds * 1000);
function slide() {
if (i > 4) {
i = 1;
}
//console.log(i);
$('.list ul li:nth-child(' + i + ')').click();
i++;
setTimeout(function () {
slide();
}, seconds * 1000);
}
});
</script>
(请注意,您的代码不符合标准,因为在那里重复了相同的代码。相反,您应该使用函数。我仅在此处集中讨论滑动部分,以解决您提出的问题)
。
编辑2
好的,我已经写了一小段代码来满足您的要求。
请参阅此JSFiddle。
。
编辑3
在隐藏幻灯片之前停止幻灯片的淡入动画(当要显示新幻灯片时)。
请参阅此更新的JSFiddle。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句