問題描述

簡(jiǎn)單的背景切換

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默認(rèn)display:none;

setInterval（）只執(zhí)行了一次，就想問為啥進(jìn)入不了第二次？

各位大佬不要鄙視我，感謝您的解答~

問題解答

不是鄙視你，但這明顯是語(yǔ)法問題……實(shí)際上我認(rèn)為 setInterval 一直都在執(zhí)行，但是你的函數(shù) direct 的運(yùn)行結(jié)果是固定的，循環(huán)的最終結(jié)果是第二張顯示第一張隱藏，所以看起來好像沒執(zhí)行一樣。

你應(yīng)該這樣做：

var current = 0;function direct(){ $('.bg_img').eq(current).show() .siblings().hide(); current++; if (current > 1) { current = 0; } }

這里用到了閉包，把狀態(tài)保存在定時(shí)器的外面，才能夠每次往下循環(huán)。

另外再補(bǔ)充一點(diǎn)渲染的知識(shí)。對(duì)于這種用 for 循環(huán)改變視圖狀態(tài)，瀏覽器會(huì)把這些狀態(tài)都緩存起來，然后擇機(jī)渲染，而不是你一修改它就立刻渲染。所以你連閃一下都看不到。

參考一下

$(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);})回答3：

setInterval(function direct(){

for(var i=0;i<2;i++){ $('.bg_img').eq(i).show().siblings().hide(); }},1000); 直接這樣試試，控制臺(tái)看看，有沒有報(bào)錯(cuò)，如果報(bào)錯(cuò)的話，js也不會(huì)繼續(xù)執(zhí)行了的。回答4：

循環(huán)一次之后i的值為1 然后就一直是1 用let試試

你是不是要的這種效果，按順序一個(gè)一個(gè)顯示？

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);});回答6：

$(function(){

var index = 0;setInterval(function(){ (index < $(’.bg_img’).length) ? index ++ : index = 0; $(’.bg_img’).eq(index).show().siblings().hide();},1000);

})

setInterval(direct(),1000);

不知道對(duì)不對(duì)，但是總感覺是這個(gè)的問題