基于jquery实现点击左右按钮图片横向滚动

更新时间：2013年04月11日 14:44:01 作者：

点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面，效果相当不错，感兴趣的前端工程师们可以参考下

点击左右按钮图片横向滚动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> 

您可能感兴趣的文章:

jQuery Ajax异步处理Json数据详解
jquery ajax处理json数据其实与其它ajax处理数据没什么很大的改动，我们只要简单处理一下ajax部份的dataType数据类型等于json即可解决了
2013-11-11
jQuery异步上传文件插件ajaxFileUpload详细介绍
这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下
2015-05-05
jQuery - css() 方法示例详解
css()方法设置或返回被选元素的一个或多个样式属性,下面有几个不错的示例，大家可以感受下
2014-01-01
jQuery简单实现网页选项卡特效
本文给大家分享一段基于jQuery简单实现的网页选项卡代码，非常简单实用，这里推荐给小伙伴们。
2014-11-11
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的3D双柱状图效果,涉及jQuery使用插件FusionCharts结合xml数据绘制的3D双柱状图的相关操作技巧,需要的朋友可以参考下
2017-04-04
jQuery 获取与设置元素属性的详细方法(看完这篇文章就搞明白了)
这篇文章带领大家熟练掌握 jQuery 的属性方面的操作，包括固有属性的获取与设置，自定义属性的获取与设置等等，走进 jQuery 的更深层次阶段，这也是脚本之家小编发现的一篇比较实用的文章
2023-06-06
基于JQuery的cookie插件
JQuery居然没有操作cookie相关的函数，搜了下官方有个cookie的插件。
2010-04-04
jquery插件制作表单验证实现代码
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范
2012-08-08
Validform+layer实现漂亮的表单验证特效
创建一个JavaScript表单验证插件，可以说是一个繁琐的过程，涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手，也应该是善假于外物的。本文就给大家结合2款优秀的插件来实现这个问题，有需要的小伙伴可以参考下
2016-01-01
jQuery 中使用JSON的实现代码
json 是 Ajax 中使用频率最高的数据格式，在浏览器和服务器中之间的通讯可离不开它
2011-12-12