你的位置:首页 > Java教程

[Java教程]js制作图片轮换切换


如上图所示,运用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事件的灵活运用,以及一些逻辑处理。