js实现图片淡入淡出切换简易效果

2019-11-20 09:10:44

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js图片淡入淡出切换详细代码，供大家参考，具体内容如下

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">      *{padding: 0;margin: 0;}      ul{overflow: hidden;}      li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-height: 30px;text-align: center;}      img{width:306px;opacity: 0;}      .active{background:yellow}    </style>            </head>  <body>    <ul>      <li>王宝强</li>      <li>马蓉</li>      <li>宋吉</li>    </ul>    <img src=""/>  </body>  <script src="public.js"></script>    <script type="text/javascript">      var oLi=document.getElementsByTagName("li");      var oImg=document.getElementsByTagName("img")[0];      var arr=['img/wbb.jpg','img/wlp.jpg','img/qs.jpg']      var time=null;      var time1=null;             for(i=0;i<oLi.length;i++){        oLi[i].index=i;        oLi[i].onclick=function(){          for(i=0;i<oLi.length;i++){            oLi[i].className="";          }          this.className="active";          oImg.src=arr[this.index];                     var num=0;          var step=2;          clearInterval(time);          clearInterval(time1);          time = setInterval(function(){            num+=step;            if(num>=200){              num=200;              clearInterval(time);            }            oImg.style.opacity = num/200;          },20)           }      }           </script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：javascript实现简单的on事件绑定

下一篇：JS对HTML表格进行增删改操作