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 幻灯片插件(带缩略图功能)
Jan 24 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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 配置文件中open_basedir选项作用
2009/07/19 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python抓取网页中的图片示例
2014/02/28 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
文员岗位职责
2013/11/09 职场文书
运输服务质量承诺书
2014/03/27 职场文书
娱乐节目策划方案
2014/06/10 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技