基于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写的点击上下滚动的小例子
Aug 27 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
node.js文件上传处理示例
Oct 27 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
vue实现简单图片上传
Jun 30 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 JSON 数据解析代码
2010/05/26 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
浅谈Node.js 中间件模式
2018/06/12 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python中查看变量内存地址的方法
2015/05/05 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
幼儿园秋游活动方案
2014/01/21 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android