jQuery 学习笔记之十四 横向滚动效果

$(function()){

   var page = 1;

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

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

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

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

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

 

   //向右移动按钮

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

      if(page=page_count){

 

       //已经到最后一个版面了，如果再向后，必须跳转到第1个版面

       $parent.animate({left:0},800);

       //通过改变left值，跳转到第1个版面

       page=1;

 

      }else{

 

       //通过改变left值，达到每次换一个版面

       $parent.animate({left:'-='+none_unit_width},800);

       //切换到下

       page++;

 

      }

    });

 

    //往左 按钮

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

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

        if(page==1){

     //已经到第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--;

    }

       }

    })

 

}

 

 

    <div class="global_module prolist">

            <h3>新款上市</h3>

            <div  class="prolist_content">

                <ul>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                        <li>

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

                    </li>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                        <li>

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

                    </li>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                    <li>

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

                    </li>

                </ul>

            </div>

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

        </div>

出处：http://www.cnblogs.com/liuyong/