有人说原生js写的有兼容问题，我在网上查了查，此类型的代码有很多（高手还是很多的），但是写的太复杂，最近正好在看《锋利的jquery》，书中有这样的例子，书中的例子是新闻标题向上无缝滚动，我发现稍微一改就能向左，向右，向下滚动，而且可以很轻松的把文字换成图片，在此向作者表示感谢。
先上代码，本代码实现了图片向左无缝滚动，里边有注释讲如何实现向上滚动，需要阅读者有一点点css和jquery知识：
<!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>jq</title>
<style type="text/css">
*{margin:0; padding:0;}
li{list-style:none;}
.scrollNews{
width:600px;
height:80px;
line-height:60px;
overflow:hidden;
background:#eee;
}
.scrollNews ul{width:1800px; margin-top:10px; }
.scrollNews li{
height:60px; float:left; margin-right:5px; display:inline;
}
</style>
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var $this = $(".scrollNews");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, 3000 );
}).trigger("mouseleave");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").width(); //获取宽度，向上滚动则需要获取高度.height()
$self.animate({ "marginLeft" : -lineHeight +"px" }, 600 , function(){ //向左滚动，向上滚动则需要改为marginTop,其他方向类似，下同
$self.css({marginLeft:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
})
}
</script>
</head>
<body>
<div class="scrollNews" >
<ul>
<li><img src="images/1.gif" width="317" height="60" /></li>
<li><img src="images/2.gif" width="317" height="60" /></li>
<li><img src="images/3.gif" width="317" height="60" /></li>
<li><img src="images/4.gif" width="317" height="60" /></li>
<li><img src="images/5.gif" width="317" height="60" /></li>
</ul>
</div>
</body>
</html>
写下此文，做个备忘
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
