基于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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
javascript变量声明实例分析
Apr 25 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
HTML+JS实现在线朗读器
Feb 15 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
js 省地市级联选择
2010/02/07 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
详解js闭包
2014/09/02 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
使用Python实现简单的服务器功能
2017/08/25 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
优秀导游先进事迹材料
2014/01/25 职场文书
音乐教学随笔感言
2014/02/19 职场文书
个人贷款承诺书
2014/03/28 职场文书
母校寄语大全
2014/04/10 职场文书
护理专业自我评价
2015/03/11 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
总结几个非常实用的Python库
2021/06/26 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android