jQuery点击后一组图片左右滑动的实现代码


Posted in Javascript onAugust 16, 2012
$(function () { 
var page = 1;//初始化page变量 
var i = 2;//每版放两组图片 
var $pictureShow = $(".pictures4"); 
var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 
var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 
var page_number = Math.ceil(len / i);//找到一共有多少个版面 
$("#symbol4b").click(function () { 
if (!$(".picturescontent4").is(":animated")) {//判断是否正在执行动画效果 
if (page == page_number) {//已经到最后一个版面了,如果再向后,必须跳转到第一个版面。 
$(".picturescontent4").animate({ left: '0px' }, "slow");//通过改变left值,跳转到第一个版面 
page = 1; 
} else { 
$(".picturescontent4").animate({ left: '-=' + downwidth }, "slow");//通过改变left值,达到每次换一个版面 
page++; 
} 
} 
return false; 
}); 
$("#symbol4a").click(function () { 
if (!$(".picturescontent4").is(":animated")) { 
if (page == 1) {//已经到第一个版面了,如果再向前,必须跳转到最后一个版面 
$(".picturescontent4").animate({ left: '-=' + downwidth * (page_number - 1) }, "slow");//通过改变left值,跳转到最后一个版面 
page = page_number; 
} else { 
$(".picturescontent4").animate({ left: '+=' + downwidth }, "slow");//通过改变left值,达到每次换一个版面 
page--; 
} 
} 
return false; 
}); 
});

<div class="pictures4"> 
<div class="picturescontent4"> 
<ul class="pictures2ul3"> 
<li class="li13"> 
<a class="commona" href="#"><img class="picture" src="i/图片13.png" alt="图片13"/> </a> 
</li> 
<li class="li15"> 
<a" class="commona" href="#"><img class="picture" src="i/图片15.png" alt="图片15"/> </a> 
</li> 
</ul> 
<ul class="pictures2ul4"> 
<li class="li14"> 
<a class="commona" href="#"><img class="picture" src="i/图片14.png" alt="图片14"/> </a> 
</li> 
<li class="li16"> 
<a class="commona" href="#"><img class="picture" src="i/图片16.png" alt="图片16"/> </a> 
</li> 
</ul> 
<ul class="pictures2ul1"> 
<li class="li1"> 
<a class="commona" href="#"><img class="picture" src="i/图片1.png" alt="图片1"/> </a> 
</li> 
<li class="li3"> 
<a class="commona" href="#"><img class="picture" src="i/图片3.png" alt="图片3"/> </a> 
</li> 
</ul> 
<ul class="pictures2ul2"> 
<li class="li2"> 
<a class="commona" href="#"><img class="picture" src="i/图片2.png" alt="图片2"/> </a> 
</li> 
<li class="li4"> 
<a class="commona" href="#"><img class="picture" src="i/图片4.png" alt="图片4"/> </a> 
</li> 
</ul> 
<ul class="pictures2ul5"> 
<li class="li9"> 
<a class="commona" href="#"><img class="picture" src="i/图片9.png" alt="图片9"/> </a> 
</li> 
<li class="li11"> 
<a" class="commona" href="#"><img class="picture" src="i/图片11.png" alt="图片11"/> </a> 
</li> 
</ul> 
<ul class="pictures2ul6"> 
<li class="li10"> 
<a class="commona" href="#"><img class="picture" src="i/图片10.png" alt="图片10"/> </a> 
</li> 
<li class="li12"> 
<a class="commona" href="#"><img class="picture" src="i/图片12.png" alt="图片12"/> </a> 
</li> 
</ul> 
</div> 
</div>

.pictures2ul1,.pictures2ul2 ,.pictures2ul3,.pictures2ul4,.pictures2ul5,.pictures2ul6 
{ 
margin-top:0px; 
margin-right:17px; 
padding:0px; 
width: 122px; 
float:left; 
list-style-type:none;} 
.pictures4 
{ 
height:111px; 
position:absolute; 
overflow:hidden; 
width:278px; 
} 
.picturescontent4 //其中设置position了,才能在JavaScript用left控制。 
{ 
position:absolute; 
float:left; 
width:834px; 
}
Javascript 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 #Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python实现批量修改文件名
2020/03/23 Python
django实现日志按日期分割
2020/05/21 Python
python如何输出反斜杠
2020/06/18 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
团员学习总结的自我评价范文
2013/10/14 职场文书
考博自荐信
2013/10/25 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
领导失职检讨书
2014/02/24 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
会议主持词结束语
2015/07/03 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL