欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)圖片淡入淡出切換簡(jiǎn)易效果

 更新時(shí)間：2021年09月17日 09:25:59   作者：如弈如意  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片淡入淡出切換簡(jiǎn)易效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js圖片淡入淡出切換詳細(xì)代碼，供大家參考，具體內(nèi)容如下

<!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>王寶強(qiáng)</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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論