jquery 無限迴圈滾動，文字圖片皆可，IE6,7,8,FF8測試無誤
阿新 • • 發佈：2019-02-20
有人說原生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>
寫下此文，做個備忘