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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
js特殊字符转义介绍
Nov 05 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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设计模式 Delegation(委托模式)
2011/06/26 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python中创建二维数组
2018/10/17 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
勤俭节约倡议书
2014/04/14 职场文书
节能环保演讲稿
2014/08/28 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014年电信员工工作总结
2014/12/19 职场文书