基于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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue router demo详解
Oct 13 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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
php下使用iconv需要注意的问题
2010/11/20 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP7 标准库修改
2021/03/09 PHP
为数据添加append,remove功能
2006/10/03 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
原生JS实现天气预报
2020/06/16 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python3 replace()函数使用方法
2018/03/19 Python
对Python中的@classmethod用法详解
2018/04/21 Python
关于Python的一些学习总结
2018/05/25 Python
python3中property使用方法详解
2019/04/23 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python实现多线程端口扫描
2019/08/31 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
浅析Python 多行匹配模式
2020/07/24 Python
python中的测试框架
2020/11/13 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
小学教师寄语大全
2014/04/03 职场文书
小学生综合素质评语
2014/04/23 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
考试后的感想
2015/08/07 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript