简单的背景切换
jquery部分
$(function(){
function direct(){
for(var i=0;i<2;i++){
$(".bg_img").eq(i).show().siblings().hide();
}
}
setInterval(direct,1000);
})
html部分
<p class="main_bg">
<p class="bg_img bg1"></p>
<p class="bg_img bg2"></p>
</p>
css部分
.bg2默认display:none;
setInterval()只执行了一次,就想问为啥进入不了第二次?
各位大佬不要鄙视我,感谢您的解答~
ringa_lee2017-06-30 09:57:19
不是鄙视你,但这明显是语法问题……实际上我认为 setInterval 一直都在执行,但是你的函数 direct
的运行结果是固定的,循环的最终结果是第二张显示第一张隐藏,所以看起来好像没执行一样。
你应该这样做:
var current = 0;
function direct(){
$(".bg_img").eq(current).show()
.siblings().hide();
current++;
if (current > 1) {
current = 0;
}
}
这里用到了闭包,把状态保存在定时器的外面,才能够每次往下循环。
另外再补充一点渲染的知识。对于这种用 for
循环改变视图状态,浏览器会把这些状态都缓存起来,然后择机渲染,而不是你一修改它就立刻渲染。所以你连闪一下都看不到。
学习ing2017-06-30 09:57:19
参考一下
$(function(){
function direct(i){
$(".bg_img").eq(i).show().siblings().hide();
}
var i = 0;
setInterval(function () {
direct(i)
i = (i + 1) % $(".bg_img").length
}, 1000);
})
習慣沉默2017-06-30 09:57:19
setInterval(function direct(){
for(var i=0;i<2;i++){
$(".bg_img").eq(i).show().siblings().hide();
}
},1000);
直接这样试试,控制台看看,有没有报错,如果报错的话,js也不会继续执行了的。
过去多啦不再A梦2017-06-30 09:57:19
你是不是要的这种效果,按顺序一个一个显示?
jQuery(function($){
var bgImg = $(".bg_img"),
maxIndex = bgImg.length - 1,
i = 0;
function direct(){
bgImg.eq(i).show().siblings().hide();
if (i < maxIndex) {
i++;
} else {
i = 0;
}
}
setInterval(direct, 1000);
});
为情所困2017-06-30 09:57:19
$(function(){
var index = 0;
setInterval(function(){
(index < $('.bg_img').length) ? index ++ : index = 0;
$('.bg_img').eq(index).show().siblings().hide();
},1000);
})