自己使用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 相关文章推荐
Javascript排序算法之计数排序的实例
Apr 05 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JScript实现地址选择功能
Aug 15 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
图解javascript作用域链
May 27 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安装问题
2006/10/09 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
学习php分页代码实例
2013/10/24 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python编写的最短路径算法
2015/03/25 Python
python中list常用操作实例详解
2015/06/03 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python破解zip加密文件的方法
2018/05/31 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python中字符串List按照长度排序
2019/07/01 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python处理写入数据代码讲解
2020/10/22 Python
python 实现Harris角点检测算法
2020/12/11 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
业务部经理岗位职责
2014/01/04 职场文书
我未来的职业规划范文
2014/01/11 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
工作检讨书大全
2015/01/26 职场文书
信仰纪录片观后感
2015/06/08 职场文书
python本地文件服务器实例教程
2021/05/02 Python