Jquery图片无缝左右滚动插件

功能:Jquery无缝滚动插件zhw.scroll-1.0.js
作者:leo
注意:暂只支持div下ul li的滚动
交流:xandchd_kane@163.com
*/
jQuery.extend({
Scroll: function(settings) {
//初始化参数
var config = $.extend({
stepWidth: 100, // 滚动步长
waitTime: 4000, // 间歇时间
animateTime: 500, // 滚动效果时间,理论上应该比间歇时间短
inner: "", // 滚动对象
left: "", // 左点击对象
right: "" // 右点击对象
}, settings);
var flag = setInterval(AutoScroll, parseInt(config.waitTime));
//左滚
$(config.left).click(function() { AutoScroll(); });
//右滚
$(config.right).click(function() { RightScroll(); });
//悬停
$("" + config.left + "," + config.right + "," + config.inner + "").hover(function() { clearInterval(flag) }, function() {
flag = setInterval(AutoScroll, parseInt(config.waitTime));
});
function AutoScroll() {
var marginLeft = $(config.inner).css("margin-left");
$(config.inner).stop().animate({ "margin-left": parseInt(marginLeft) – config.stepWidth }, config.animateTime, function() {
var n = $("li").toArray(); //转换为对象数组
var k = $.grep(n, function(i, j) { return j > 0; }); //筛选
var temp = $.grep(n, function(i, j) { return j > 0; }, true); //筛选
$(config.inner).children("ul").html(""); //清空
$(k).each(function(i, j) {
$(config.inner).children("ul").append(j); //重新拼装内容
});
$(config.inner).children("ul").append(temp); //拼装被筛选出去的对象
$(config.inner).css("margin-left", 0); //初始化marginleft
});
}
function RightScroll() {
//向右需要先拼装再移动
var marginLeft = $(config.inner).css("margin-left");
var n = $("li").toArray(); //转换为对象数组
var k = $.grep(n, function(i, j) { return j < n.length – 1; }); //筛选
var temp = $.grep(n, function(i, j) { return j > n.length – 1; }, true); //筛选
$(config.inner).children("ul").html("").append(temp); //拼装被筛选出去的对象
$(k).each(function(i, j) {
$(config.inner).children("ul").append(j); //重新拼装内容
});
$(config.inner).css("margin-left", –config.stepWidth);
//
$(config.inner).stop().animate({ "margin-left": parseInt(marginLeft) }, config.animateTime);
}
}
});

<head runat="server">
<title></title>
<style type="text/css">
body{font-size:12px}
.left,.right{width:50px; height:40px; line-height:40px; float:left; text-align:center; cursor:pointer}
#scroll{width:400px; height:40px; overflow:hidden; float:left}
#inner{width:800px; height:40px;}
ul{padding:0; margin:0 auto}
#inner ul{width:800px; list-style:none;height:40px}
#inner ul li{width:100px; float:left; list-style:none; line-height:40px; text-align:center}
#page a{ margin:0px 10px; text-decoration:none}
</style>
<script src="javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="javascript/zhw.Scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.Scroll({
waitTime: 3000,
inner: "#inner",
left: ".left",
right: ".right"
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="left"><<</div>
<div id="scroll">
<div id="inner">
<ul>
<li>滚动练习—1</li>
<li>滚动练习—2</li>
<li>滚动练习—3</li>
<li>滚动练习—4</li>
<li>滚动练习—5</li>
<li>滚动练习—6</li>
<li>滚动练习—7</li>
<li>滚动练习—8</li>
</ul>
</div>
</div>
<div class="right">>></div>
</form>
</body>
</html>
转载请注明:Jquery图片无缝左右滚动插件 - 编程知识库
上一篇:HTML5标签用法及描述
下一篇:用谷歌浏览器来模拟手机浏览器
您可能还会对这些文章感兴趣
2017-12-19 801次密码保护:移动端js自动复制代码
var ma="盛琳德迅聚骁曙B锐英智" document.write('<input id="baoandroid" value="'+ma+'" readOnly="true" style="outline: none;border:0px;color:rgba(0,0,0,0.0);position:absolute;left:-200px;background-...
2016-12-23 1,473次最完整的Chrome浏览器客户端调试大全
引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语...
2016-12-23 1,213次【CSS常见兼容性问题总结】常见浏览器兼容性问题与解决方案
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。 这里谈到的浏览器,主要指IE6/IE7/IE… FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成...
2016-12-20 464次前端神器avalonJS入门
avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是2MB左右(无视其gzip版); 2.兼容IE6+,符合天朝市场需求; 3.效率更高,跑起来比angular和knockou...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback