说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

照片轮回显示

编辑:说三道四文库 发布时间:2018-08-20 04:24
HTML文档下载 WORD文档下载 PDF文档下载

想实现图片隔1秒循环显示,但一直没有成功。

主代码如下, 
 <script type="text/javascript">

   function show()
{

setTimeout("disSummer()",1000);
setTimeout("disAut()",1000);
setTimeout("disWinter()",1000);
setTimeout("disSpring()",1000);
setInterval("show()",1000);

}


function  disSpring(){
document.getElementById("bigImg").src="images/Spring.jpg";
document.getElementById("spingPic").style.border="#F00 solid 1px";
document.getElementById("summperPic").style.border="#000 solid 1px";
document.getElementById("AutPic").style.border="#000 solid 1px";
document.getElementById("winterPic").style.border="#000 solid 1px";

}

function  disSummer(){
document.getElementById("bigImg").src="images/Summer.jpg";
document.getElementById("spingPic").style.border="#000 solid 1px";
document.getElementById("summperPic").style.border="#F00 solid 1px";
document.getElementById("AutPic").style.border="#000 solid 1px";
document.getElementById("winterPic").style.border="#000 solid 1px";

}

function  disAut(){
document.getElementById("bigImg").src="images/Aut.jpg";
document.getElementById("spingPic").style.border="#000 solid 1px";
document.getElementById("summperPic").style.border="#000 solid 1px";
document.getElementById("AutPic").style.border="#F00 solid 1px";
document.getElementById("winterPic").style.border="#000 solid 1px";
}

function  disWinter(){
document.getElementById("bigImg").src="images/Winter.jpg";
document.getElementById("spingPic").style.border="#000 solid 1px";
document.getElementById("summperPic").style.border="#000 solid 1px";
document.getElementById("AutPic").style.border="#000 solid 1px";
document.getElementById("winterPic").style.border="#F00 solid 1px";
}



</script>


</head>



<body onload="show()">

<div id="container" >


    <div id="pic">
     <img id="bigImg" src="images/Spring.jpg" width="500px" height="300px"/>
    </div>
   
    
    <div id="Spring" onmouseover="disSpring()">
     <img id="spingPic" src="images/Spring.jpg" width="120px" height="150px"  />
    </div>
    
    <div id="Summer" onmouseover="disSummer()">
     <img id="summperPic" src="images/Summer.jpg" width="120px" height="150px"   />
    </div>
    
    <div id="Aut" onmouseover="disAut()">
     <img id="AutPic" src="images/Aut.jpg" width="120px" height="150px" />
    </div>
    
    <div id="Winter" onmouseover="disWinter()">
     <img id="winterPic" src="images/Winter.jpg" width="120px" height="150px" />
    </div>
  
 </div>



</body>
</html>
都死循环了,show里面又setInterval执行show,那不是累加起来了,生成多个计时器,而且setTimeout基本上是同时执行你的4个函数了,如果你要按循序执行4个方法,应该再对应的函数内启动setTimeout,最后一个函数执行的setTimeout执行show重复
小弟刚学,可以帮忙写下吗?
该回复于2016-04-15 08:17:55被管理员删除
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘