-----------------Js
// JavaScript Document
function SlideBox(container, frequency, direction) {
if (typeof(container) == 'string') {
container = document.getElementById(container);
}
this.container = container;
this.frequency = frequency;
this.direction = direction;
this.films = [];
var divs = this.container.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == 'slideFilm') {
divs[i].onmouseover = function(self)
{
return function()
{
self._mouseover()
};
}(this);
divs[i].onmouseout = function(self){return function(){self._mouseout()};}(this);
this.films[this.films.length] = divs[i];
}
}
this._playTimeoutId = null;
this._slideTimeoutId = null;
this._slidable = true;
var isIE5 = navigator.userAgent.toLowerCase().indexOf("msie 5")>0;
if (!isIE5)
this._loop();
}
SlideBox.prototype = {
_loop : function() {
var sb = this;
this._playTimeoutId = setTimeout(function(){sb._slide()}, this.frequency);
},
_slide : function() {
var sb = this;
var _slide = function() {
if (!sb._slidable) return;
var c = sb.container;
if (sb.direction == 'top') {
if (c.scrollTop < c.offsetHeight-2) {
c.scrollTop += 2;
} else {
clearInterval(sb._slideTimeoutId);
sb._loop();
var ul = c.getElementsByTagName('ul')[0];
ul.appendChild(c.getElementsByTagName('li')[0]);
c.scrollTop = 0;
}
} else if (sb.direction == 'left') {
if (c.scrollLeft < c.offsetWidth-2) {
c.scrollLeft += 2;
} else {
clearInterval(sb._slideTimeoutId);
sb._loop();
var ul = c.getElementsByTagName('ul')[0];
ul.appendChild(c.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
}
}
}
this._slideTimeoutId = setInterval(_slide, 10);
},
_mouseover : function() {
this._slidable = false;
},
_mouseout : function() {
this._slidable = true;
}
}
-------------------------------HTML Example
<html>
<head>
<title>Untitled</title>
<style>
/* AD top */
#ADList{
float:left;
width:380px;
height:191px;
}
#ADList ul{
margin:0;
padding:0;
list-style-type:none;
}
#ADListRoll{
height:25px;
width:380px;
/*background:url(http://pics.taobao.com/bao/album/chl/fp/home_roll_bg.gif) left top no-repeat;*/
line-height:25px;
padding:0 5px;
color:#69F;
}
#ADListRoll a{
color:#565656;
}
#ADListText,#ADListImg{
margin-top:6px;
}
#ADListText ul {
margin-left:10px;
}
#ADListText ul li{
float:left;
line-height:16px;
line-height:20px;
padding:0;
margin:0;
width:170px;
display:block;
padding-left:12px;
/*background:transparent url(http://pics.taobao.com/bao/album/sys/misc/top_icon.gif) 3px 7px no-repeat;*/
}
#ADListImg li{
float:left;
width:76px;
text-align:center;
}
#ADListImg li img{
border:1px #ccc solid;
margin-bottom:5px;
display:block;
}
#ADListRollContainer{height:25px;line-height:25px;overflow:hidden;float:left; }
#ADListRollContainer ul { list-style: none; margin:0px; padding:0; cursor:pointer;}
#ADListRollContainer li { display: block;}
#ADListRollContainer li div { height:25px; line-height:25px; margin:0 0 0 5px; padding:0;}
</style>
</head>
<body>
<div id="ADList">
<div id="ADListRoll">
<div id="ADListRollContainer">
<ul>
<li>
<div class="slideFilm">1.<a href="http://search1.taobao.com/browse/1801/t-false---------2048------g,giydambrhizdamrvhe5tembqgeydumrqgi2toozsgaydamb2giydamzuhmzdaobwgy5dgmrtguzdwmrqha4daortgi2tmni--g,hmzdambqge5ndw5sx652jqhnhmzdambrga5ndw6lvi5tembqgaydurltorswktdbovsgk4rp2hc4vk6axt36yozsga4dmnr2ztmmr456vo52vt5vyhidwmrqha4daowquhi7s--g,ojsxgzlsozsv64dsnfrwkwztguwdcmbqgaydambqgboq---g,2hnq-------2-------b-y-40-list-coefp-0-all-1801.htm"
target="_blank">雅诗兰黛ANR眼霜小样50元起</a>
</div>
</li>
<li>
<div class="slideFilm">2.<a href="http://search1.taobao.com/browse/15-1512/t-g,hm5twoz3hm5twoz3-----g,g4ztsmbmmq4deobmiuztkobmg4ztombmjm3tsmddfq3demztfrhdomzmky4tembmie3dmobmg42taqzmiq4taobmgmzdkmbmo44dgmbmmm4dkobmieytembqfrndglclgi--or-2048----2--------y-40-list-coefp-0-all-1512.htm1512.htm"
target="_blank">淘宝人气拍照手机促销(行货)</a></div>
</li>
<li>
<div class="slideFilm">3.<a href="http://list.taobao.com/browse/99-50001031/t-false--------yes---------------------2-------b-y-40-list-coefp-0-all-50001031.htm"
target="_blank">迎新年游戏货币打折出售</a></div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="slidebox.js"></script>
<script type="text/javascript">
new SlideBox('ADListRollContainer', 2000, 'top');
</script>
</body>
</html>