自己使用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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
JavaScript命令模式原理与用法实例详解
Mar 10 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 Memcached应用实现代码
2010/02/08 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
jQuery入门知识简介
2010/03/04 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
运用js实现图层拖拽的功能
2019/05/24 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
深入理解python多进程编程
2016/06/12 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python浪漫表白源码
2019/04/05 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python数据存储之 h5py详解
2019/12/26 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python while true实现爬虫定时任务
2020/06/08 Python
深入浅析Python代码规范性检测
2020/07/31 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书