我不是JavaScript专家,但我找到了一个可以帮助我完成所需工作的脚本,但是我需要对它进行一些小修改。这是JS代码:
$('html').addClass('js');
$(function() {
var timer = setInterval( showDiv, 4000);
var counter = 0;
function showDiv() {
if (counter ==0) { counter++; return; }
$('#div1, #div2, #div3, #div4')
.stop()
.hide()
.filter( function() { return this.id.match('div' + counter); })
.show('fast');
counter == 4? counter = 0 : counter++;
}
});
这是一个HTML代码:
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
div1
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
<div id='div4' class='display' style="background-color: yellow;">
div4
</div>
<div>
现在这个脚本做的是在页面打开后10秒进行第一次div show,然后关闭它并打开下一个。我需要改变的是删除第一个div的10秒时间间隔,使其与页面一起打开,并保留其他div的时间间隔。我希望你明白我想要完成的事情。谢谢你的帮助。
答案 0 :(得分:3)
首次手动调用showdiv()
,高于您设置定时器的位置,并将计数器初始化移到其上方:
...
var counter = 1;
showDiv();
var timer = setInterval( showDiv, 4000);
...
答案 1 :(得分:1)
尝试以下解决方案:
showDiv();
var timer = setInterval(showDiv, 4000);
var counter = 1;
function showDiv(){
$('.display').hide();
$('#div'+counter).show();
(counter == 4 ? counter = 1 : counter++)
}
工作示例:http://jsfiddle.net/3cKJV/
您还可以使用jQuery函数animate()或fadeIn()将效果应用于过渡。
答案 2 :(得分:0)
我建议您从头开始使用css显示第一个div。 在您的javascript中,按照最初编程的方式执行setInterval。 以1开始你的柜台。 在showDiv中提升它。删除您返回的初始检查。 其余的这应该工作。如果没有,请回复我。 我明天会在我的电脑上写下实际代码。