js 图片轮播

最新推荐文章于 2022-03-15 23:23:14 发布

会做饭的技术男

最新推荐文章于 2022-03-15 23:23:14 发布

阅读量114

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj2h02ajik2j.html

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

学了点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;
         width: 300px;margin: 0 auto;
         overflow: hidden;
         height: 300px;border-radius: 6px;}
 
        .pics{width: 1600px;height: 300px; position: absolute;}
            .pics>img{ width: 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>

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 图片轮播

学了点dom,写个轮播练练手，这是本人大体写的样子，一些细节功能还待完善。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container">
复制链接

扫一扫