点击左右按钮图片横向滚动jquery代码,JS代码库,德仔网

代码语言

代码分类

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

作者:Dezai.CN / 发布于2013/9/27/ 659


	<!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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　横向滚动　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)