使用js实现带有停顿效果的图片滚动（按钮控制）

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > 无缝滚动2   title  > 
       style  >  
    #warp  {  
        width  :   1250px  ;  
        height  :   300px  ;  
        overflow  :   hidden  ;  
        margin  :  100px auto 0  ;  
        overflow-x  :   auto  ; 
     }  
    #warp #con  {  
        width  :   4000px  ;  
        height  :   300px  ;  
        overflow  :   hidden  ; 
     }  
    #warp #con #box1  {  
         float  :   left  ;  
         overflow  :   hidden  ; 
     }  
    #warp #con #box2  {  
         float  :   left  ;  
         overflow  :   hidden  ; 
     }  
    #warp img  {  
        float  :   left  ;  
        margin-right  :   10px  ;  
        width  :   200px  ;  
        height  :   300px  ; 
     }  
    .btn  {  
        text-align  :   center  ;  
        margin-top  :   10px  ; 
     }  
    .btn button  {  
        font-size  :   16px  ; 
     } 
       style  > 
   head  > 
   body  > 
       div   id  ="warp"  > 
           div   id  ="con"  > 
               div   id  ="box1"  > 
                   img   src  ="images/meinv1.jpg"   alt  =""  > 
                   img   src  ="images/meinv2.jpg"   alt  =""  > 
                   img   src  ="images/meinv3.jpg"   alt  =""  > 
                   img   src  ="images/meinv4.jpg"   alt  =""  > 
                   img   src  ="images/meinv5.jpg"   alt  =""  > 
                   img   src  ="images/meinv6.jpg"   alt  =""  > 
               div  > 
               div   id  ="box2"  >  div  > 
           div  > 
       div  > 
       div   class  ="btn"  > 
           button   id  ="scrollL"  >    > 
           button   id  ="scrollR"  > 右滚>>   button  > 
       div  > 
       script  > 
         var   warp  =  document.getElementById(  '  warp  '  );
          var   con  =  document.getElementById(  '  con  '  );
          var   box1  =  document.getElementById(  '  box1  '  );
          var   box2  =  document.getElementById(  '  box2  '  );
          var   img  =  box1.getElementsByTagName(  '  img  '  )[  0  ];
          var   scrollL  =  document.getElementById(  '  scrollL  '  );
          var   scrollR  =  document.getElementById(  '  scrollR  '  );
          var   timer1  =  null  ,timer2  =  null  ,flage  =  1  ;
        box2.innerHTML  =  box1.innerHTML;
        max  =  box1.clientWidth;
        imgmax  =  img.clientWidth  +  10  ;
          function   scrollLeft(){
            flage  =  1  ;
            clearInterval(timer1);
            timer1  =  setInterval(  function  (){
                warp.scrollLeft  ++  ;
                  if   (warp.scrollLeft  >=  max) {
                    warp.scrollLeft  =  0  ;
                }
                  if  (warp.scrollLeft  %  imgmax  ==  0  ){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2  =  setTimeout(  function  (){
                        timer1  =  setInterval(scrollLeft,  5  )
                    },  2000  )
                }
            },  5  )
        }
          function   scrollRight(){
            flage  =  0  ;
            clearInterval(timer1);
            timer1  =  setInterval(  function  (){
                warp.scrollLeft  --  ;
                  if   (warp.scrollLeft    0  ) {
                    warp.scrollLeft  =  max;
                }
                  if  (warp.scrollLeft  %  imgmax  ==  0  ){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2  =  setTimeout(  function  (){
                        timer1  =  setInterval(scrollRight,  5  )
                    },  2000  )
                }
            },  5  )
        }
            scrollLeft();
        scrollL.onclick  =  function  (){
              //   clearInterval(timer1); 
             //   clearTimeout(timer2); 
             scrollLeft();
        }
        scrollR.onclick  =  function  (){
              //   clearInterval(timer1); 
             //   clearTimeout(timer2); 
             scrollRight();
        }
        warp.onmouseenter  =  function  (){
            clearInterval(timer1);
            clearTimeout(timer2);
        }
        warp.onmouseleave  =  function  (){
            clearInterval(timer1);
            clearTimeout(timer2);
            console.log(flage);
              if   (flage) {scrollLeft();}
                 else  {scrollRight();}    
        }
        script  > 
   body  > 
   html  >  

查看更多关于使用js实现带有停顿效果的图片滚动（按钮控制）的详细内容...