jquery实现手动图片滚动效果

效果图：

功能介绍：当点击左按钮或右按钮时，图片会以每四张为一个版块向左或右滚动

HTML

 1  <div class="global_module prolist">
 2     <h3>新款上市</h3>
 3     <div  class="prolist_content">
 4       <ul>
 5         <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span> </li>
 6         <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li>
 7         <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li>
 8         <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li>
 9         <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span> </li>
10         <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li>
11         <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li>
12         <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li>
13         <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span> </li>
14         <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li>
15         <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li>
16         <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li>
17       </ul>
18     </div>
19     <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
20   </div>
21  </div>

 

CSS：

.content_right .prolist {  
    height: 220px;
    margin-bottom:10px; 
    overflow:hidden; 
    border: 1px solid #AAAAAA;
    background:#FFFFFF;
}
.prolist_content{
     position:absolute; 
    width:1800px;
    top:26px; 
    left:0px;
    padding:20px 0 0 8px;
}
.content_right .prolist ul{  
    margin-bottom:10px; 
    float:left;
    height: 220px;
}
.content_right .prolist ul li { 
    float:left;
    display:inline;
    text-align:center;
    margin-right:22px;  
}
.content_right .prolist ul li span { 
    display:block;
    overflow:hidden; 
}
.content_right .prolist ul li img { 
    display:block; 
    width:124px; 
    height:124px; 
    background:#EEE; border:0;
}
.module_left_right{ 
    position:absolute; 
    top:5px; 
    right:10px; 
    cursor:pointer;
}

 

js代码：

 

$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
    var len = $(".prolist_content ul li").length;
    var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
    var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位
    var $parent = $(".prolist_content"); 
    //向右 按钮
    $(".goRight").click(function(){ 
        if( !$parent.is(":animated") ){
            if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                $parent.animate({ left : 0}, 800); //通过改变left值，跳转到第一个版面
                page = 1;
            }else{
                $parent.animate({ left : '-='+none_unit_width}, 800);  //通过改变left值，达到每次换一个版面
                page++;
            }
        }
   });
    //往左 按钮
    $(".goLeft").click(function(){
        if( !$parent.is(":animated") ){
            if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                $parent.animate({ left : '-='+none_unit_width*(page_count-1)}, 800); //通过改变left值，跳转到最后一个版面
                page = page_count;
            }else{
                $parent.animate({ left : '+='+none_unit_width }, 800);  //通过改变left值，达到每次换一个版面
                page--;
            }
        }
    });
});

 

 

 

 

 

 

posted on 2010-02-11 14:04  wind side  阅读(2469)  评论(0)  编辑  收藏  举报

导航