基于jQuery的图片左右无缝滚动插件


Posted in Javascript onMay 23, 2012

在线演示:http://demo.3water.com/js/2012/myslideLeftRight/
打包下载:https://3water.com/jiaoben/44973.html
核心代码:

(function($){ 
$.fn.extend({ 
"slidelf":function(value){ 
value = $.extend({ 
"prev":"", 
"next":"", 
"speed":"" 
},value) 
var dom_this = $(this).get(0); //将jquery对象转换成DOM对象;以便其它函数中调用; 
var marginl = parseInt($("ul li:first",this).css("margin-left")); //每个图片margin的数值 
var movew = $("ul li:first",this).outerWidth()+marginl; //需要滑动的数值 
//左边的动画 
function leftani(){ 
$("ul li:first",dom_this).animate({"margin-left":-movew},value.speed,function(){ 
$(this).css("margin-left",marginl).appendTo($("ul",dom_this)); 
}); 
} 
//右边的动画 
function rightani(){ 
$("ul li:last",dom_this).prependTo($("ul",dom_this)); 
$("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left":marginl},value.speed); 
} 
//点击左边 
$("."+value.prev).click(function(){ 
if(!$("ul li:first",dom_this).is(":animated")){ 
leftani(); 
} 
}); 
//点击左边 
$("."+value.next).click(function(){ 
if(!$("ul li:first",dom_this).is(":animated")){ 
rightani(); 
} 
}) 
} 
}); 
})(jQuery)

思路:

点击左边--

1.将第一个LI向左滑动,滑动的数值就是LI的宽度。(这里是用负margin-left来实现移动。)

2.滑动完成后,将这个LI插入到整个LI的最后一个(实现无缝滚动)

点击右边--

1.将最后一个LI插入到所有LI的第一个,并将其定位到可见区域之外,(这里用的是margin)

2.再将其滑动到可见区域。
注意:这里的IF判断语句,是为了防止连续点击“左”或“右”的铵钮,而出现的BUG;

这判断的意思:只有当LI不处于动画状态时,才执行移动函数。只要处于动画状态,点击时,任何事都不发生。

Javascript 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
js实现随机点名功能
Dec 23 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 #Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 #Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 #Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 #Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 #Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 #Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 #Javascript
You might like
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
Javascript Objects详解
2014/09/04 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
python如何爬取个性签名
2018/06/19 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
大学生毕业求职自荐书范文
2014/02/04 职场文书
公司演讲稿开场白
2014/08/25 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python