【js与jquery】产品列表横向滚动效果

2019独角兽企业重金招聘Python工程师标准>>>

1.效果如图所示：

 

2.html代码：

[php] view plaincopy

1. <div class="global_module prolist">  

2.            <h3>新款上市</h3>  

3.             <div  class="prolist_content">  

4.                 <ul>  

5.                     <li>  

6.                     <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬1</span><span>$120.00</span>  

7.                     </li>  

8.                     <li>  

9.                     <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  

10.                     </li>  

11.                     <li>  

12.                     <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  

13.                     </li>  

14.                     <li>  

15.                       <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  

16.                     </li>  

17.                     <li>  

18.                        <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>  

19.                     </li>  

20.                     <li>  

21.                         <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  

22.                     </li>  

23.                     <li>  

24.                       <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  

25.                     </li>  

26.                     <li>  

27.                       <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  

28.                     </li>  

29.                     <li>  

30.                        <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>  

31.                     </li>  

32.                     <li>  

33.                         <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  

34.                     </li>  

35.                     <li>  

36.                       <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  

37.                     </li>  

38.                     <li>  

39.                       <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  

40.                     </li>  

41.                 </ul>  

42.             </div>  

43.             <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" />  

44.                <img class="goRight" src="images/right.gif" alt="" />  

45.            </p>  

46. </div>  

[php] view plaincopy

1.    

[php] view plaincopy

1. 3.jquery代码：  

[php] view plaincopy

1. /*新款上市模块横向滚动*/  

2. //当单击产品列表右上角的"左右"按钮时,产品列表就可以按照单击的方向横向滚动  

3. $(function(){  

4.     var page = 1;  

5.     var i = 4; //每版放4个图片  

6.     var len = $(".prolist_content ul li").length;  

7.     var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数  

8.     var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位  

9.     var $parent = $(".prolist_content");   

10.     //向右 按钮  

11.     $(".goRight").click(function(){   

12.         if( !$parent.is(":animated") ){  

13.             if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。  

14.                 $parent.animate({ left : 0}, 800); //通过改变left值，跳转到第一个版面  

15.                 page = 1;  

16.             }else{  

17.                 $parent.animate({ left : '-='+none_unit_width}, 800);  //通过改变left值，达到每次换一个版面  

18.                 page++;  

19.             }  

20.         }  

21.    });  

22.     //往左 按钮  

23.     $(".goLeft").click(function(){  

24.         if( !$parent.is(":animated") ){  

25.             if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。  

26.                 $parent.animate({ left : '-='+none_unit_width*(page_count-1)}, 800); //通过改变left值，跳转到最后一个版面  

27.                 page = page_count;  

28.             }else{  

29.                 $parent.animate({ left : '+='+none_unit_width }, 800);  //通过改变left值，达到每次换一个版面  

30.                 page--;  

31.             }  

32.         }  

33.     });  

34. });  

35. 
    

转载于:https://my.oschina.net/yonghan/blog/524035