本文介绍了一种使用JavaScript和jQuery实现每隔10秒自动切换显示两个DIV元素的方法。通过设置定时器，该示例展示了如何在两个不同的DIV之间进行切换。
涉及到了两个知识点，一个知识点是利用js操作dom的css属性；另一个知识点是js进行定时操作。有两种实现方式，一种是用原生js，另一种是用jquery。为了简单，以jquery为例：
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="d1" style="display:none;">d1</div>
<div id="d2">d2</div>
<script type="text/javascript">
$(function(){
//转换div
function changeDiv(){
if($("#d1").style.display==none){
$("#d1").show();
$("#d2").hide();
}else{
$("#d1").hide();
$("#d2").show();
}
}
//利用setInterval，设置每隔10秒执行changeDiv函数。
window.setInterval("changeDiv()",10000);
});
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="d1" style="display:none;">d1</div>
<div id="d2">d2</div>
<script type="text/javascript">
$(function(){
//转换div
function changeDiv(){
if($("#d1").style.display==none){
$("#d1").show();
$("#d2").hide();
}else{
$("#d1").hide();
$("#d2").show();
}
}
//利用setInterval，设置每隔10秒执行changeDiv函数。
window.setInterval("changeDiv()",10000);
});
</script>
</body>
</html>
扫一扫
2852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
