基于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 相关文章推荐
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
你的 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
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
改变隐藏的input中value值的方法
2014/03/19 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python列表(List)知识点总结
2019/02/18 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
复试通知单模板
2015/04/24 职场文书
转正申请报告格式
2015/05/15 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
java开发双人五子棋游戏
2022/05/06 Java/Android