自己使用jquery写的一个无缝滚动的插件


Posted in Javascript onApril 30, 2014

效果图:

自己使用jquery写的一个无缝滚动的插件 

html代码:

<h1>无缝滚动,向右滚动</h1> 
<ul id="guoul1"> 
<li><img src="img/f1.jpg" alt="f1"/></li> 
<li><img src="img/f2.jpg" alt="f2"/></li> 
<li><img src="img/f3.jpg" alt="f3"/></li> 
<li><img src="img/f4.jpg" alt="f4"/></li> 
<li><img src="img/f5.jpg" alt="f5"/></li> 
<li><img src="img/f6.jpg" alt="f6"/></li> 
<li><img src="img/f7.jpg" alt="f7"/></li> 
</ul> <h1>无缝滚动,向左滚动</h1> 
<ul id="guoul2"> 
<li>111111111111</li> 
<li>222222222222</li> 
<li>3333333333333</li> 
<li>4444444444444</li> 
<li>5555555555555</li> 
<li>6666666666666</li> 
<li>7777777777777</li> 
<li>8888888888888</li> 
<li>9999999999999</li> 
</ul> 
<h1>无缝滚动,向上滚动</h1> 
<ul id="guoul3"> 
<li>111111111111</li> 
<li>222222222222</li> 
<li>3333333333333</li> 
<li>4444444444444</li> 
<li>5555555555555</li> 
<li>6666666666666</li> 
<li>7777777777777</li> 
<li>8888888888888</li> 
<li>9999999999999</li> 
</ul> 
<h1>无缝滚动,向下滚动</h1> 
<ul id="guoul4"> 
<li>111111111111</li> 
<li>222222222222</li> 
<li>3333333333333</li> 
<li>4444444444444</li> 
<li>5555555555555</li> 
<li>6666666666666</li> 
<li>7777777777777</li> 
<li>8888888888888</li> 
<li>9999999999999</li> 
</ul> 
<h1>无缝滚动,非ul,li标签组合,向右滚动</h1> 
<div id="guoul5"> 
<p>111111111111</p> 
<p>222222222222</p> 
<p>3333333333333</p> 
<p>4444444444444</p> 
<p>5555555555555</p> 
<p>6666666666666</p> 
<p>7777777777777</p> 
<p>8888888888888</p> 
<p>9999999999999</p> 
</div> 
<h1>不动</h1> 
<ul id="guoul6"> 
<li>111111111111</li> 
<li>222222222222</li> 
<li>3333333333333</li> 
<li>4444444444444</li> 
<li>5555555555555</li> 
<li>6666666666666</li> 
<li>7777777777777</li> 
<li>8888888888888</li> 
<li>9999999999999</li> 
</ul>

css代码:
ul, li,h1 { margin: 0; padding: 0; list-style-type:none;} 
ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;} 
li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: Gray; color: Yellow; margin-left:10px;} 
#guoul1{ width:1000px; height:188px;margin: 0; padding: 0;} 
#guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}

js插件代码:
; (function ($) { 
var defaults = { 
dir: "left", //none:不动,up:上,right:右,down:下,right:左 
delay: 30,//执行时间 
}; 
$.fn.gysContentDisplay = function (opt) { 
opt = $.extend({}, defaults, opt); //全局变量区域 
var obj = $(this); //当前对象 
obj.css({ "overflow": "hidden" }); //初始化元素 
if (opt.dir == "none") return; 
var objLis = obj.children(); //对象中的子元素 
objLis.css({ "overflow": "hidden" }); 
var objSize = 0; //外框尺寸 
var scrollEvent = "scrollLeft"; //滚动条的滚动方向 
var liTotalSize = 0, liTotalSizeOther = 0; //每个li元素的尺寸(宽或者高),克隆之后的总尺寸 
var scrollSize = 0, //滚动条的实际距离 
scrollSizeMax = 0, //滚动条的最大距离 
scrollSizeMin = 0; //滚动条的最小距离 
var interval = ""; //记录setInterval 
if (opt.dir == "up" || opt.dir == "down") {//上下 
objSize = obj.innerHeight(); 
scrollEvent = "scrollTop"; 
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize); 
} 
else if (opt.dir == "left" || opt.dir == "right") {//左右 
objSize = obj.innerWidth(); 
scrollEvent = "scrollLeft"; 
obj.css({ "padding-left": 0, "padding-right": 0 }).width(objSize); 
} 
else { 
alert("你的dir参数有误"); 
} 
var getChildTotalSize = function (dir) {// 定义获取li总尺寸的方法 
if (dir == "left" || dir == "right") { 
objLis.css("float", "left"); 
return function () { 
objLis.each(function () { 
liTotalSize += $(this).outerWidth(true); 
}); 
} 
} 
else if (dir == "up" || dir == "down") { 
objLis.css("float", "none"); 
return function () { 
objLis.each(function () { 
liTotalSize += $(this).outerHeight(true); 
}); 
} 
} 
} (opt.dir); 
getChildTotalSize(); //获得所有的li的总尺寸,在方法中赋值 
(function () { 
var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //赋值子元素多少遍 
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串 
for (var i = 0; i < cloneCount; i++) { 
cloneHtmlNow += cloneHtmlStart; 
} 
obj.append(cloneHtmlNow); 
liTotalSizeOther = (cloneCount + 1) * liTotalSize; //获取添加了子元素之后的长度 
})(); 

if (opt.dir == "left" || opt.dir == "right") { 
obj.css({ "position": "relative", "z-index": 0 }); 
obj.children().css({ "position": "absolute", "z-index": 1 }); 
var left = 0; 
obj.children().each(function () { 
$(this).css({ "left": left + "px", "top": 0 }); 
left += $(this).outerWidth(true); 
}); 
} 

//滚动条的滚动方法 
function scrollChange(dir) { 
if (dir == "left" || dir == "up") { 
obj[scrollEvent](0); 
scrollChange = function () { 
scrollSize++; 
if (scrollSize >= liTotalSize) scrollSize = 0; 
obj[scrollEvent](scrollSize); 
} 
} 
else if (dir == "right" || dir == "down") { 
scrollSizeMax = liTotalSizeOther - objSize; 
obj[scrollEvent](scrollSizeMax); 
scrollSize = scrollSizeMax; 
scrollSizeMin = scrollSizeMax - liTotalSize; 
scrollChange = function () { 
scrollSize--; 
if (scrollSize <= scrollSizeMin) scrollSize = scrollSizeMax; 
obj[scrollEvent](scrollSize); 
} 
} 
}; 
scrollChange(opt.dir); 
interval = setInterval(scrollChange, opt.delay); 
obj.children().on("mouseover", function () { 
clearInterval(interval); 
}).on("mouseleave", function () { 
interval = setInterval(scrollChange, opt.delay); 
}); 
} 
})(jQuery);

插件的调用:
$(function () { 
$("#guoul1").gysContentDisplay({ dir: "right" }); 
$("#guoul2").gysContentDisplay({ dir: "left" }); 
$("#guoul3").gysContentDisplay({ dir: "up" }); 
$("#guoul4").gysContentDisplay({ dir: "down" }); 
$("#guoul5").gysContentDisplay({ dir: "right" }); 
$("#guoul6").gysContentDisplay({ dir: "none" }); 
})
Javascript 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 #Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 #Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 #Javascript
js获取ajax返回值代码
Apr 30 #Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 #Javascript
js图片预加载示例
Apr 30 #Javascript
javascript闭包入门示例
Apr 30 #Javascript
You might like
PHP中数组定义的几种方法
2013/09/01 PHP
PHP编程风格规范分享
2014/01/15 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
业务员的岗位职责
2014/03/15 职场文书
社会实践活动总结范文
2014/07/03 职场文书
班级活动总结格式
2014/08/30 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
创业计划书之网吧
2019/10/10 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL