JavaScript自动播放选项卡

JavaScript学习视频link
在这里插入图片描述
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <style media="screen">
    #commentary{
      margin: auto;
      width: 526px;
      position: relative;
    }
    #tu{
      height: 280px;
      width: 520px;
      margin:50px auto;
      border: 3px solid black;
    }
    #l,#r{
      position: absolute;
      top: 50%;
      margin-top: -18px;
    }
    #r{
      right: 0;
    }
    #circle{
      width: 56px;
      height: 13px;
      background-color: pink;
      position: absolute;
      bottom: 15px;
      left: 50%;
      margin-left: -32px;
    }
    li{
      float: left;
      margin-right:10px;
    }
    #tu img{
      display: none;
    }
  </style>
  <script type="text/javascript">
    window.οnlοad=function(){
      var oPrev=document.getElementById('l');
      var oNext=document.getElementById('r');
      var alist=document.getElementsByTagName('li');
      var oTU=document.getElementById('tu');
      var aImg=oTU.getElementsByTagName('img');
      var iNow=0;
      var timer=null;
      function tab(){
        for (var i=0;i<3;i++){
               aImg[i].style.display='none';
        }

        aImg[iNow].style.display='block';
      }
      function fnNext(){
        iNow++
        if(iNow==3){iNow=0;}
        tab();
      }
      for(var i=0;i<3;i++){
        alist[i].abc=i;
        alist[i].οnclick=function(){
          iNow=this.abc;
         for (var i=0;i<3;i++){
                aImg[i].style.display='none';
         }
         aImg[this.abc].style.display='block';
      };
    }
    oNext.οnclick=fnNext;
    oPrev.οnclick=function(){
      iNow--
      if(iNow==-1){iNow=2;}
      tab();
    };
    clearInterval(timer);
    timer=setInterval(function(){
     fnNext();
   },500);
    oTU.οnmοuseοver=function(){
      clearInterval(timer);
    };
    oTU.οnmοuseοut=function(){
      clearInterval(timer);
      timer=setInterval(function(){
       fnNext();
     },500);
    };
      };
  </script>
  </head>
  <body>
    <div id="commentary">
      <div id="tu">
          <img src="comment1.png" style="display: block;">
          <img src="comment2.png" >
          <img src="comment3.png" >
      </div>
      <img src="left.jpg" id="l">
      <img src="right.jpg" id="r">
      <ul id="circle">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>
JavaScript自动播放选项卡

猜你喜欢
