Question

我是一名Javascript初学者，遇到了一个小问题。我试图让我的五个div在页面加载时立即旋转可见性。现在，只有将鼠标悬停在每个图像按钮上后，它们才会开始旋转。谢谢！

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

<!--

function toggleDiv(id,flagit) {

if (flagit=="1"){

if (document.layers) document.layers[''+id+''].visibility = "show"

else if (document.all) document.all[''+id+''].style.visibility = "visible"

else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"

}

}

</script>



</head>

<body>

<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function rotatecontent(){
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" 
messages[curcontentindex].style.display="block" 
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 1000)
}
}


</script>

<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)" ><img     src="Images/BAB.com_web_link_10.jpg" width="250" height="100"     STYLE="position:absolute; TOP:0px; LEFT:400px;"></a>
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)"><img     src="Images/SLU_on_the_Road.jpg" width="250"     height="100" STYLE="position:absolute; TOP:100px; LEFT:400px;"></a>
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)"><img     src="Images/Billiken_Blogs.jpg" width="250"     height="100" STYLE="position:absolute; TOP:200px; LEFT:400px;"></a>
<a href="#" onMouseOver="toggleDiv('div4',1)" onMouseOut="toggleDiv('div4',0)"><img     src="Images/SLU_Chat.jpg" width="250"     height="100" STYLE="position:absolute; TOP:300px; LEFT:400px;"></a>
<a href="#" onMouseOver="toggleDiv('div5',1)" onMouseOut="toggleDiv('div5',0)"><img     src="Images/Viewbook_Button_2011.jpg"     width="250" height="100" STYLE="position:absolute; TOP:400px; LEFT:400px;"></a>
<p class="desc">

<div class="dyncontent"><div id="div1">Div 1/div></div>

<div class="dyncontent"><div id="div2">Div 2</div></div>

<div class="dyncontent"><div id="div3">Div 3</div></div>

<div class="dyncontent"><div id="div4">Div 4</div></div>

<div class="dyncontent"><div id="div5">Div 5</div></div>

</p>

</body>
</html>

Answer 1

您的大部分JavaScript都需要在行尾添加分号。通过像JSLint这样的linter运行它来查找任何其他错误。另外，请尝试使用window.addEventListener('load',rotateContent,false);而不是window.onload=rotateContent

Answer 2

$(document).ready(function() {

  // code within ready() will execute
  // after page load

  rotatecontent();

});

Javascript，jQuery - 在页面加载时旋转div

2 个答案: