实现方法众多,这里我的思路为:
容器(这里我使用table)中的初始图片为某一张,JS的timer(理解为全局)的timerout()事件中改变容器中<img>的src属性值,也即图片路径,从而达到每若干秒更换一次图片。
简单实现:
一、容器及<img src>初始值
<table style="height:20%; width:100%; background-color:#FFF"> <tr> <td id="main_info_jpeg" onclick="fun1()"> //此处onclick事件也能切换图片 <img id='imginfo' src="./image/test01.jpg" style="height:100%; width:100%; background-color:#FFF" title="01"> </td> </tr> </table>
二、JS轮换函数及timer
<script type="text/javascript"> //以下脚本实现三张主图的切换 function fun1(){ var now_jpeg = document.getElementById("imginfo").getAttribute("src"); //document.writeln(now_jpeg); switch(now_jpeg) { case './image/test01.jpg': document.getElementById('imginfo').setAttribute("src",'./image/test02.jpg'); break; case './image/test02.jpg': document.getElementById('imginfo').setAttribute("src",'./image/test03.jpg'); break; case './image/test03.jpg': document.getElementById('imginfo').setAttribute("src",'./image/test01.jpg'); break; default: document.writeln("未获取src"); break; } } self.setInterval('fun1()',3000); //作为全局变量理解,事件为:timerout(),事件处理函数为:fun1(). </script>
三、实现效果
1,鼠标点击图片,图片切换
2,不做任何操作,每3秒图片自动切换一次