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

2019/6/27 22:11:32

编程Tag： js 淡入淡出图片切换

本文主要是介绍js实现图片淡入淡出切换简易效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

这篇关于js实现图片淡入淡出切换简易效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章