js轮播图原理_淡入淡出轮播布局原理-CSDN博客

本文链接：https://blog.csdn.net/lunwenjun13269950823/article/details/51337707

*{margin: 0;padding: 0;}
       #div1{
           width:810px;
           height:320px;
           position:relative;
           overflow: hidden;
           margin:10px 10px;
       }
       #div2{
           width:810px;
           height:320px;
           position:absolute;
           top:0px;
           left:0px;
       }
       #div2 ul{
           width:3240px;
           list-style:none;
       }
        li{
           float:left;
           height:320px;
        }
   </style>
   <body>
       <div id="div1">
           <div id="div2">
               <ul>
                   <li><img src="img/001.jpg"></li>
                   <li><img src="img/002.jpg"></li>
                   <li><img src="img/003.jpg"></li>
                   <li><img src="img/004.jpg"></li>
               </ul>
           </div>
       </div>
   </body>
   <script src="js/startMoveBool.js"></script>
   <script type="text/javascript">
       var div2 = document.getElementById("div2");
       var imgWidth=810;
       var index=1;
       div2.onclick = function(){
           startMove(div2,{left:-imgWidth*index},function(){

               if(index==3){
               div2.style.left=0;
               index=1;}
               else
               {index++;}

           });
                   }
   </script>