js 图片轮播

学了点dom,写个轮播练练手，这是本人大体写的样子，一些细节功能还待完善。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="container"> 
              
               <div id="zuo">&lt</div>  
               <div id="you">&gt</div>
         <div class="pics" style="left: 0px;">
        <img src="../img/001.jpg"  />
        <img src="../img/timg (1).jpg"  />
        <img src="../img/timg (2).jpg"  />
        <img src="../img/timg (3).jpg" />
        <img src="../img/timg.jpg" />
        </div> 
        </div>
         
        <style>
            #you{  
             font-size: 50px;color: white;position: absolute;
             z-index:11;
             top:130px;right:10px;
            } 

            #zuo{font-size: 50px;color: white;position: absolute;
            z-index: 11;
            top:130px;lefe: 10px;
            }    

         #you:hover,#zuo:hover{opacity: 0.5;cursor: pointer;}
         *{margin: 0; padding: 0;}
         
         #container{position: relative;border:8px solid red;
          300px;margin: 0 auto;
         overflow: hidden;
         height: 300px;border-radius: 6px;}
 
        .pics{ 1600px;height: 300px; position: absolute;}
            .pics>img{  300px;height: 300px;
            display: inline-block;}
            
        </style>
            
  
     <script>
         var container=document.getElementById("container");
         var you=document.getElementById("you");
         var zuo=document.getElementById("zuo");
         var sss=document.getElementsByClassName("pics")[0];

         you.addEventListener("click",next); 
         zuo.addEventListener("click",pre)
         
          
     function pre(){
         var ss=parseInt(sss.style.left);
                  var i=0;

                    if(ss==0){
                        
                        i=1;
                        sss.style.left=-1200*i+"px";

                    }

                     if(ss==-1200){
                        
                        i=3;
                        sss.style.left=-300*i+"px";

                    }
                     
                      if(ss==-900){
                        
                        i=2;
                        sss.style.left=-300*i+"px";

                    }
                       if(ss==-600){
                        
                        i=1;
                        sss.style.left=-300*i+"px";
                    }

          if(ss==-300){
                        
                        i=0;
                        sss.style.left=-300*i+"px";

                    }
         
     }
              function next(){

                  var ss=parseInt(sss.style.left);
                  var i=0;
                    sss.style.left=-300*i+"px";
                    if(ss==0){
                        
                        i=1;
                        sss.style.left=-300*i+"px";

                    }
                    
                     if(ss==-300){ 
                        i=2;
                        sss.style.left=-300*i+"px";
                    }
                     
                      if(ss==-600){ 
                        i=3;
                        sss.style.left=-300*i+"px";

                    }
                       if(ss==-900){
                        i=4;
                        sss.style.left=-300*i+"px";
                    }
  
                   }

function autoplay(){
　　　　lunbo=setInterval(next,2000);//没用var 声明
}
　　　　autoplay();



      container.onmouseover=function(){
          clearInterval(lunbo);
          
      }
          container.onmouseout=function(){

　　　　　　　autoplay();


          }
         
     </script>     
    </body>
    
</html>

相关阅读:
伪元素和伪类的区别
 绝对定位是相对定位元素的什么边界进行定位的？
元素如何设置滚动/滚动条的设置与隐藏
 什么是行内元素、块级元素?
通过JS判断当前浏览器的类型
 获取元素计算样式getComputedStyle（）与currentStyle
javascript链式运动框架案例
 任意值的运动框架
 JS多物体运动案例：变宽、变高
 offsetWidth与offsetHeight
原文地址：https://www.cnblogs.com/rain-null/p/6899295.html