基于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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php随机显示图片的简单示例
2014/02/15 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python实现井字棋游戏
2020/03/30 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
应届毕业生求职自荐书
2014/01/03 职场文书
运动会广播稿80字
2014/01/23 职场文书
法人授权委托书范本
2014/04/04 职场文书
十佳青年事迹材料
2014/08/21 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
二十年同学聚会感言
2015/07/30 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python