星空网 > 软件开发 > Java

js制作图片轮换切换

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='/images/loading.gif' data-original="./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='/images/loading.gif' data-original="./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事件的灵活运用,以及一些逻辑处理。




原标题:js制作图片轮换切换

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

速卖通运营技巧分享:教你提升速卖通店铺销量!:https://www.ikjzd.com/articles/97742
亚马逊中国:海外购选品总量破 2000 万,将重点发力海外购业务!:https://www.ikjzd.com/articles/97743
eBay运营中,如何应对Paypal买家投诉?:https://www.ikjzd.com/articles/97744
政府出台禁令!亚马逊将被迫取消该功能:https://www.ikjzd.com/articles/97746
为什么找官方服务商,速卖通官方代运营好处?:https://www.ikjzd.com/articles/97748
Mailchimp实操系列-强大的落地页营销:https://www.ikjzd.com/articles/97750
三百元以内千兆路由器怎么选择?:https://www.vstour.cn/a/363184.html
千岛湖绿城度假酒店的简介:https://www.vstour.cn/a/363185.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流