如上图所示，运用js实现4张图片的轮换播放，要求如下：
1.页面加载时4张图片按照顺序依次循环播放；
2.当鼠标移入对应图片序号的标签上时，图片显示为对应序号的图片；
3.当鼠标移除对应序号的标签上时，图片从当前序号开始依次循环播放。
实现以上功能的代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片轮换切换</title> <style type="text/css"> body{ margin: 0px; padding: 0px; } a{ width: 14px; height: 14px; text-align: center; display: inline-block; line-height: 14px; text-decoration: none; color: black; font-size: 14px; background-color: #cccccc; } img{ width: 524px; height: 190px; } #div1{ position: absolute; top: 160px; left: 100px; } .demo{ color: #ff7300; } #content{ position: relative; } </style> <script type="text/javascript"> //获取放置在图片上的<a>标签集合 var as=document.getElementsByTagName("a"); var num=1;//控制第几个图片和a标签 window.onload=function() { as[0].className = "demo"; for (var i = 0; i < as.length; i++) { //设置鼠标移入<a>标签上切换图片 as[i].onmouseover = function () { var img = document.getElementsByTagName("img")[0]; img.src = "./img/ad-0" + this.innerHTML + ".jpg"; //移除其余a标签的样式 for (var j = 0; j < as.length; j++) { as[j].className = ""; } //设置当前a标签的样式 this.className = "demo"; //设置num为当前图片的序号 num=parseInt(this.innerHTML); //暂停图片循环播放定时器 clearInterval(id); } //设置鼠标移除时重新启动图片循环播放定时器 as[i].onmouseout=function(){ id=setInterval("tplh()",2000) } } //启动图片循环播放定时器 id=setInterval("tplh()",2000); } //设置图片循环播放 function tplh(){ var img = document.getElementsByTagName("img")[0]; img.src="./img/ad-0"+num+".jpg"; //移除其余a标签的样式 for(var i=0;i<as.length;i++){ as[i].className=""; } //设置当前a标签的样式 as[num-1].className="demo"; num++; if(num>4){ num=1; } } </script> </head> <body> <div id="content"> <img src="./img/ad-01.jpg" /> <div id="div1"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> </div> </body> </html>
关键点在于对js事件的灵活运用，以及一些逻辑处理。