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 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php目录操作实例代码
2014/02/21 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
js实现分割上传大文件
2016/03/09 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
python三元运算符实现方法
2013/12/17 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
python实现简单日期工具类
2019/04/24 Python
Python xlwt模块使用代码实例
2020/06/10 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
先进单位申报材料
2014/12/25 职场文书
中秋节祝酒词
2015/08/12 职场文书
银行服务理念口号
2015/12/25 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python