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

时间:2020-05-15 如弈如意人气:0

本文实例为大家分享了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>

加载全部内容