图片的自动滚动

最新推荐文章于 2019-06-24 16:35:26 发布

Ysiqiqi

最新推荐文章于 2019-06-24 16:35:26 发布

阅读量391

点赞数

本文链接：https://blog.csdn.net/Ysiqiqi/article/details/80646023

版权

 
   
 /***不需要自动滚动，去掉即可***/ 

 
   
 linum  
 =  
 $ 
 ( 
 '.mainlist  
 li 
 ' 
 ). 
 length 
 ; 
 //图片数量 

 
   
 w  
 =  
 linum  
 *  
 250 
 ; 
 //ul宽度 

 
   
 $ 
 ( 
 '.piclist' 
 ). 
 css 
 ( 
 'width' 
 ,  
 w  
 +  
 'px' 
 ) 
 ; 
 //ul宽度 

 
   
 $ 
 ( 
 '.og_next' 
 ). 
 click 
 ( 
 function 
 (){ 

 
   
 if 
 ( 
 $ 
 ( 
 '.swaplist,.mainlist' 
 ). 
 is 
 ( 
 ':animated' 
 )){ 

 
   
 $ 
 ( 
 '.swaplist,.mainlist' 
 ). 
 stop 
 ( 
 true 
 , 
 true 
 ) 
 ; 

}

 
 // if($('.mainlist li').length>4){//多于4张图片 

 
   
 ml  
 =  
 parseInt 
 ( 
 $ 
 ( 
 '.mainlist' 
 ). 
 css 
 ( 
 'left' 
 )) 
 ; 
 //默认图片ul位置 

 
   
 sl  
 =  
 parseInt 
 ( 
 $ 
 ( 
 '.swaplist' 
 ). 
 css 
 ( 
 'left' 
 ))/ 
 4 
 ; 
 //交换图片ul位置 

 
   
 console 
 . 
 log 
 ( 
 ml 
 ) 

 
   
 console 
 . 
 log 
 ( 
 w 
 *- 
 1 
 ) 

 
   
 if 
 ( 
 ml 
 <= 
 0  
 &&  
 ml 
 > 
 w 
 *- 
 1 
 ){ 
 //默认图片显示时 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 css 
 ({ 
 left 
 :  
 '250px' 
 }) 
 ; 
 //交换图片放在显示区域右侧 

 
   
 $ 
 ( 
 '.mainlist' 
 ). 
 animate 
 ({ 
 left 
 :  
 ml  
 -  
 250  
 +  
 'px' 
 } 
 , 
 'slow' 
 ) 
 ; 
 //默认图片滚动 

 
   
 if 
 ( 
 ml 
 ==- 
 w 
 + 
 250 
 ){ 
 //默认图片最后一屏时 

 
   
 console 
 . 
 log 
 ( 
 "if" 
 ) 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 animate 
 ({ 
 left 
 : ( 
 w  
 -  
 750 
 ) * - 
 1  
 +  
 'px' 
 } 
 , 
 'slow' 
 ) 
 ; 

 
 // $('.swaplist').animate({left: ml - 250 + 'px'},'slow');//交换图片滚动 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 before 
 ( 
 $ 
 ( 
 '.img_add' 
 ). 
 html 
 ()) 
 ; 
 //复制内容 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 animate 
 ({ 
 left 
 : 
 '-750px' 
 } 
 , 
 'slow' 
 ) 
 ; 

 
   
 console 
 . 
 log 
 (  
 $ 
 ( 
 '.swaplist' 
 ). 
 contents 
 ()) 

}

 
  } 
 else 
 { 
 //交换图片显示时 

 
   
 console 
 . 
 log 
 ( 
 "else" 
 ) 

 
 // $('.mainlist').css({left: '0px'})//默认图片放在显示区域右 

 
   
 $ 
 ( 
 '.mainlist' 
 ). 
 css 
 ({ 
 left 
 : ( 
 w  
 -  
 1000 
 ) * - 
 1  
 +  
 'px' 
 }) 
 //默认图片放在显示区域右 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 animate 
 ({ 
 left 
 :  
 sl  
 -  
 250  
 +  
 'px' 
 } 
 , 
 'slow' 
 ) 
 ; 
 //交换图片滚动 

 
   
 if 
 ( 
 sl 
 == 
 250 
 ){ 
 //交换图片最后一屏时 

 
 // $('.swaplist').html($('.mainlist').html());//复制内容 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 after 
 ( 
 $ 
 ( 
 '.mainlist' 
 ). 
 html 
 ()) 
 ; 
 //复制内容 

 
   
 $ 
 ( 
 '.mainlist' 
 ). 
 animate 
 ({ 
 left 
 :  
 sl  
 -  
 250  
 +  
 'px' 
 } 
 , 
 'slow' 
 ) 
 ; 
 //默认图片滚动 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 animate 
 ({ 
 left 
 : 
 '-750px' 
 } 
 , 
 'slow' 
 ) 
 ; 

}

 
 // } 

}

})

 
   
 $ 
 ( 
 '.og_prev' 
 ). 
 click 
 ( 
 function  
 () { 

 
   
 if  
 ( 
 $ 
 ( 
 '.swaplist,.mainlist' 
 ). 
 is 
 ( 
 ':animated' 
 )) { 

 
   
 $ 
 ( 
 '.swaplist,.mainlist' 
 ). 
 stop 
 ( 
 true 
 ,  
 true 
 ) 
 ; 

}

 
 // if($('.mainlist li').length>4){ 

 
   
 ml  
 =  
 parseInt 
 ( 
 $ 
 ( 
 '.mainlist' 
 ). 
 css 
 ( 
 'left' 
 )) 
 ; 

 
   
 sl  
 =  
 parseInt 
 ( 
 $ 
 ( 
 '.swaplist' 
 ). 
 css 
 ( 
 'left' 
 )) /  
 4 
 ; 

 
   
 if  
 ( 
 ml  
 <=  
 0  
 &&  
 ml  
 >  
 w  
 * - 
 1 
 ) { 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 css 
 ({ 
 left 
 :  
 w  
 * - 
 1  
 +  
 'px' 
 }) 
 ; 

 
   
 $ 
 ( 
 '.mainlist' 
 ). 
 animate 
 ({ 
 left 
 :  
 ml  
 +  
 250  
 +  
 'px' 
 } 
 ,  
 'slow' 
 ) 
 ; 
 //每次移动的距离 

 
   
 if  
 ( 
 ml  
 ==  
 0 
 ) { 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 animate 
 ({ 
 left 
 : ( 
 w  
 -  
 250 
 ) * - 
 1  
 +  
 'px' 
 } 
 ,  
 'slow' 
 ) 
 ; 

}

 
  }  
 else  
 { 

 
   
 $ 
 ( 
 '.mainlist' 
 ). 
 css 
 ({ 
 left 
 : ( 
 w  
 -  
 1000 
 ) * - 
 1  
 +  
 'px' 
 }) 
 ; 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 animate 
 ({ 
 left 
 :  
 sl  
 +  
 0  
 +  
 'px' 
 } 
 ,  
 'slow' 
 ) 
 ; 

 
   
 if  
 ( 
 sl  
 == - 
 250 
 ) { 

 
   
 $ 
 ( 
 '.mainlist' 
 ). 
 animate 
 ({ 
 left 
 :  
 '0px' 
 } 
 ,  
 'slow' 
 ) 
 ; 

 
   
 $ 
 ( 
 '.swaplist' 
 ). 
 after 
 ( 
 $ 
 ( 
 '.img_add' 
 ). 
 html 
 ()) 
 ; 
 //复制内容 

}

}

 
 // } 

})

 
  }) 
 ; 

 
   
 $ 
 ( 
 document 
 ). 
 ready 
 ( 
 function  
 () { 

 
   
 $ 
 ( 
 '.og_prev,.og_next' 
 ). 
 hover 
 ( 
 function  
 () { 

 
   
 $ 
 ( 
 this 
 ). 
 fadeTo 
 ( 
 'fast' 
 ,  
 1 
 ) 
 ; 

 
   
 } 
 ,  
 function  
 () { 

 
   
 $ 
 ( 
 this 
 ). 
 fadeTo 
 ( 
 'fast' 
 ,  
 0.7 
 ) 
 ; 

})

})

关注