自己使用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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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根据IP判断地区名信息的示例代码
2014/03/03 PHP
php简单分页类实现方法
2015/02/26 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
js实现打字小游戏
2019/12/17 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python 字符串只保留汉字的方法
2018/11/16 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
机关单位动员会主持词
2014/03/20 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
共青团员自我评价
2015/03/10 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript