Jquery左右无缝图片滚动插件（原创）
zhw.scroll-1.0.js
/*
功能：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);
}
}
});
功能：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);
}
}
});
前台代码
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<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>
这个插件是根据自己项目需要写的，可能不满足部分朋友的需求，欢迎交流。
