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

最新推荐文章于 2024-08-02 04:08:12 发布

bill_live

最新推荐文章于 2024-08-02 04:08:12 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/liuyong/archive/2011/03/31/2000986.html

版权

$(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>

转载于:https://www.cnblogs.com/liuyong/archive/2011/03/31/2000986.html