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

编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板