点击左右按钮图片横向滚动jquery

最新推荐文章于 2021-06-04 08:35:34 发布

阿聪世家

最新推荐文章于 2021-06-04 08:35:34 发布

阅读量3.3k

点赞数 2

分类专栏：网站常用jquery效果各种焦点图滚动效果文章标签：点击滚动 jQuery 图片

本文链接：https://blog.csdn.net/congcong875/article/details/8787841

版权

网站常用jquery效果同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

各种焦点图滚动效果

11 篇文章 0 订阅

订阅专栏

点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面：

效果图如下：

<!DOCTYPE html>
    <html lange="en">
    <head>
    <title>点击左右按钮图片横向滚动</title>
    <meta charset=utf-8" /> 
   <style type="text/css">
		* { margin:0; padding:0;}
		body { font-size:12px;}
		.box {height:66px;  float:left;    width:440px;	overflow: hidden; position:relative;   }
		.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
		.box li:hover { color:#999; }
		.box li.active { background-position:-174px 0; color:#555;cursor:default;}
		a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
		a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
	   .scroll_list{ width:10000em; position:absolute;	}
    </style>
    <!--   引入jQuery -->
    <script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
	  var page= 1;
	  var i = 4;//每版四个图片
	  
	  	  
	//向右滚动
	 $(".next").click(function(){ //点击事件
	  
			 var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
			 var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
			 var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
			 
			 var v_width = v_cont.width();
			 var len = v_show.find("li").length; //我的视频图片个数
			 var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数

		 if(!v_show.is(":animated")){
			 if(page == page_count){
				 v_show.animate({left:'0px'},"slow");
				 page =1; 
			    }else{
				 v_show.animate({left:'-='+v_width},"slow");
				 page++;
			 }
		 }
		 
	  });
	  
	 //向左滚动
		  $(".prev").click(function(){ //点击事件
	  
			 var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
			 var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
			 var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
			 
			 var v_width = v_cont.width();
			 var len = v_show.find("li").length; //我的视频图片个数
			 var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数

		 if(!v_show.is(":animated")){
			 if(page == 1){
			 v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
			 page =page_count; 
		     }else{
			 v_show.animate({left:'+='+ v_width},"slow");
			 page--;
		 }
		 }
	  }); 
		 	
	
    });
	
    </script>
    </head>
    <body>
   
    <!-- 例子 -->
    <div class="scroll" style="margin:0 auto;width:550px;">
	  <!-- "prev page" link -->
		<a class="prev" href="#"></a>
			<div class="box">
			
				<div class="scroll_list">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
						<li>10</li>
						<li>11</li>
						<li>12</li>
						<li>13</li>
						<li>14</li>
						<li>15</li>
						<li>16</li>
					</ul>
				</div>
			</div>
		<!-- "next page" link -->
		<a  class="next" href="#"></a>
   
    </div>
  
    </body>
    </html>