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


Posted in Javascript onApril 11, 2013

点击左右按钮图片横向滚动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>
Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 #Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 #Javascript
在JavaScript并非所有的一切都是对象
Apr 11 #Javascript
在JavaScript中typeof的用途介绍
Apr 11 #Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 #Javascript
javascript中的delete使用详解
Apr 11 #Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
详解javascript遍历方式
2015/11/11 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
如何使用angularJs
2017/05/08 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
React 源码中的依赖注入方法
2018/11/07 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
pandas对指定列进行填充的方法
2018/04/11 Python
NumPy 数组使用大全
2019/04/25 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
网络工程师的自我评价
2013/10/02 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
一名老师的自我评价
2014/02/07 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android