Javascript、jQuery-页面加载时旋转div_Javascript_Jquery_Html

Javascript、jQuery-页面加载时旋转div

javascript jquery html

Javascript、jQuery-页面加载时旋转div,javascript,jquery,html,Javascript,Jquery,Html,我是一个Javascript初学者，遇到了一个小问题。我正试图让我的五个div在页面加载后立即旋转可见性。现在，它们只有在我将鼠标悬停在每个图像按钮上后才开始旋转。谢谢大家! <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-- function toggleDiv(id,flagit) { if (flagit=="1"){ if (document.l

我是一个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>


大多数JavaScript都需要在行尾加上分号。通过类似于JSLint的linter运行它，以查找任何其他错误。
另外，尝试使用window.addEventListener（'load'，rotateContent，false）

而不是

window.onload=rotateContent

很遗憾，我尝试了这两种解决方案，脚本的行为仍然是一样的。你能用更新的代码编辑你的帖子吗，这样我们就可以理解你的脚本现在是什么样子了？我实际上修改了rotateContent定义，删除了div的css样式，现在轮换工作了。谢谢你指出这一点！我根本不知道函数

rotatecontent

是在哪里定义的。这应该有用吗？哦，哇，那可能是因为这是一个函数，我在它不起作用后去掉了。我忘了里面有。基本上，它应该在加载时旋转div，并且最终我想添加一个函数，在按钮图像的鼠标上方显示某个div。

$(document).ready(function() {

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

  rotatecontent();

});