自己使用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 相关文章推荐
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vue-router权限控制(简单方式)
Oct 29 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
一个程序下载的管理程序(三)
2006/10/09 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
AngularJS中的模块详解
2015/01/29 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
javascript基础知识讲解
2017/01/11 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
js字符串类型String常用操作实例总结
2019/07/05 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
信息工程学院毕业生推荐信
2013/11/05 职场文书
施工人员岗位职责
2013/12/12 职场文书
手机业务员岗位职责
2013/12/13 职场文书
顶岗实习计划书
2014/01/10 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
影视后期实训报告
2014/11/05 职场文书
销售内勤岗位职责
2015/02/10 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Linux安装Docker详细教程
2022/07/07 Servers