写了个jQuery无缝滚动小插件
一个项目中需要用到图片无缝滚动，拿出几年前用过的一用结果不能用了，网上一顿搜索结果没找到太好用的，要不就是要写很多html和js，要不就是对滚动的内容有严格的要求，只好参考着改善了一下，没有做太详细的测试，不过在自己的项目里使用没有什么问题，记下来以备后用，有什么新的需要再扩展吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="Js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#imageMarquee").marquee();
});
(function($) {
$.fn.marquee = function(o) {
o = $.extend({
speed: parseInt($(this).attr('speed')) || 30, // 滚动速度
step: parseInt($(this).attr('step')) || 1, // 滚动步长
direction: $(this).attr('direction') || 'left' // 滚动方向
}, o || {});
var dIndex = jQuery.inArray(o.direction, ['right', 'down']);
if (dIndex > -1) {
o.direction = ['left', 'up'][dIndex];
o.step = -o.step;
}
var mid;
var e = $(this);
e.wrap("<div class='wrap'><ul><li></li></ul></div>");
var p = e.parent().parent().parent();
//alert(e.width());
p.find('ul>li:first').after(p.find('ul>li:first').clone());
p.find('ul:first').css("listStyle","none");
if(o.direction == 'left')
{
p.find('ul>li').css("float","left");
p.find('ul:first').width(e.width() * 2);
}
else
{
p.find('ul:first').height(e.height() * 2);
}
mid = setInterval(_marquee, o.speed);
p.hover(
function(){clearInterval(mid);},
function(){mid = setInterval(_marquee, o.speed);}
);
function _marquee() {
if (o.direction == 'left') {
if(p.scrollLeft() >= e.width()){
p.scrollLeft(0);
}
else{
p.scrollLeft(p.scrollLeft() + o.step);
}
}
else{
if(p.scrollTop() >= e.height()){
p.scrollTop(0);
}
else{
p.scrollTop(p.scrollTop() + o.step);
}
}
}
};
})(jQuery);
</script>
<style type="text/css">
.wrap{ width:800px; height:180px; overflow:hidden;}
#imageMarquee td { padding:5px; }
#imageMarquee img {border:solid 1px #999999;}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="imageMarquee">
<tr>
<td><img src="Images/1.jpg" width="145" height="160" /></td>
<td><img src="Images/2.jpg" width="145" height="160" /></td>
<td><img src="Images/3.jpg" width="145" height="160" /></td>
<td><img src="Images/4.jpg" width="145" height="160" /></td>
<td><img src="Images/5.jpg" width="145" height="160" /></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="Js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#imageMarquee").marquee();
});
(function($) {
$.fn.marquee = function(o) {
o = $.extend({
speed: parseInt($(this).attr('speed')) || 30, // 滚动速度
step: parseInt($(this).attr('step')) || 1, // 滚动步长
direction: $(this).attr('direction') || 'left' // 滚动方向
}, o || {});
var dIndex = jQuery.inArray(o.direction, ['right', 'down']);
if (dIndex > -1) {
o.direction = ['left', 'up'][dIndex];
o.step = -o.step;
}
var mid;
var e = $(this);
e.wrap("<div class='wrap'><ul><li></li></ul></div>");
var p = e.parent().parent().parent();
//alert(e.width());
p.find('ul>li:first').after(p.find('ul>li:first').clone());
p.find('ul:first').css("listStyle","none");
if(o.direction == 'left')
{
p.find('ul>li').css("float","left");
p.find('ul:first').width(e.width() * 2);
}
else
{
p.find('ul:first').height(e.height() * 2);
}
mid = setInterval(_marquee, o.speed);
p.hover(
function(){clearInterval(mid);},
function(){mid = setInterval(_marquee, o.speed);}
);
function _marquee() {
if (o.direction == 'left') {
if(p.scrollLeft() >= e.width()){
p.scrollLeft(0);
}
else{
p.scrollLeft(p.scrollLeft() + o.step);
}
}
else{
if(p.scrollTop() >= e.height()){
p.scrollTop(0);
}
else{
p.scrollTop(p.scrollTop() + o.step);
}
}
}
};
})(jQuery);
</script>
<style type="text/css">
.wrap{ width:800px; height:180px; overflow:hidden;}
#imageMarquee td { padding:5px; }
#imageMarquee img {border:solid 1px #999999;}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="imageMarquee">
<tr>
<td><img src="Images/1.jpg" width="145" height="160" /></td>
<td><img src="Images/2.jpg" width="145" height="160" /></td>
<td><img src="Images/3.jpg" width="145" height="160" /></td>
<td><img src="Images/4.jpg" width="145" height="160" /></td>
<td><img src="Images/5.jpg" width="145" height="160" /></td>
</tr>
</table>
</body>
</html>
