Javascript

图片连续滚动(缓冲，一停一顿效果)，可左右翻滚

作者: 青锋幽灵日期: 2008-09-12 10:31

字体大小: 小中大

样式表代码（scroll.css）：

CSS代码

* {margin:0;padding:0;}
body {width:370px;}
a {text-decoration:none;color:#000;}
a:hover {text-decoration:underline;color:#f00;}
ul,li {float:left;width:100%;list-style-type:none;}
h3,h3 a {font-size:12px;font-weight:normal;font-family:"宋体",Verdana;}
.bc {height:90px;clear:both;overflow:hidden;padding:3px 15px 0 15px;}
.bc a.scroll {width:12px;height:46px;overflow:hidden;text-indent:-100px;margin-top:5px;background:#333;}
.bc a.s1 {float:left;}
.bc a.s2 {float:rightright;}
#scroll1 {padding:5px 8px 7px 8px;}
.bc div.scroll {float:left;position:relative;width:318px;left:6px;overflow:hidden;}
div.scroll ul {width:8000%;}
div.scroll ul li {width:106px;padding:0 0 2px 0;text-align:center;}
div.scroll ul li img {clear:both;width:90px;height:60px;border:1px solid #ccc;margin:0 auto;}
div.scroll ul li h3 {height:20px;line-height:20px;overflow:hidden;}
div.scroll ul li h3,div.scroll ul li h3 a {color:#c00;font-family:"宋体";}

效果JS代码（scroll.js）：

JavaScript代码

function scroll_initialize(Id){
var self =this;
var obj = document.getElementById(Id);
if(obj.getElementsByTagName('li').length==0)return;
var links = obj.getElementsByTagName('a');
var a = links[0];
var b = links[links.length-1];
var ul = obj.getElementsByTagName('ul')[0];
var div = obj.getElementsByTagName('div')[0];
var li_width = obj.getElementsByTagName('li')[0].offsetWidth;
var li_count = obj.getElementsByTagName('li').length;
var ul_width = li_width * li_count;
this.speed = 2000;
this.mar = null;
this.doSlide = function(n,t,d,c){
var timers=new Array(n);
var x=div.scrollLeft;
for(var i=0;i<n;i++)(function(){
if(timers[i]) clearTimeout(timers[i]);
var j=i;
timers[i]=setTimeout(function(){
if(d==0){
if(ul_width-div.scrollLeft<=0){
div.scrollLeft-=ul_width;
}else{
div.scrollLeft=x+Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));
}
}else{
if(div.scrollLeft<=0){
}else{
div.scrollLeft=x-Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));
}
}
},(i+1)*t);
})();
if(ul_width-div.scrollLeft<=0 || (div.scrollLeft % li_width != 0 && div.scrollLeft != 0)){
div.scrollLeft=0;
}
}
this.istop=function(){
clearInterval(self.mar);
};
this.istart=function(){
self.mar = setInterval(function(){self.doSlide(20,40,0,1);},self.speed);
};
this.initialize = function(){
ul.innerHTML+=ul.innerHTML;
ul.style.width = parseInt(ul_width * 2) + 'px';
a.onclick=function(e){self.doSlide(20,40,0,3);return false;};
a.onfocus=function(){this.blur();};
a.onmouseout=function(){self.istart();};
a.onmouseover=function(){self.istop();};
b.onclick=function(e){self.doSlide(20,40,1,3);return false;};
b.onfocus=function(){this.blur();};
b.onmouseout=function(){self.istart();};
b.onmouseover=function(){self.istop();};
div.onmouseout=function(){self.istart();};
div.onmouseover=function(){self.istop();};
this.istart();
};
this.initialize();
}

页面HTML代码(scroll.html)：

XML/HTML代码

<!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>
<title>doc1</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="scroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scroll.js"></script>
</head>
<body>
<div class="bc" id="scroll1">
<a href="#left" class="scroll s1" title="向左滚动">向左滚动</a>
<div class="scroll">
<ul>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h69/img200809111627130.jpg" /></a>
<h3><a href="#">魔幻《天地OL》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h68/img200809091601330.jpg" /></a>
<h3><a href="#">《名将三国》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051655460.jpg" /></a>
<h3><a href="#">变型金刚OL</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051653330.jpg" /></a>
<h3><a href="#">盛大《八门OL》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051650450.jpg" /></a>
<h3><a href="#">回合制《穿越OL》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h69/img200809111633050.jpg" /></a>
<h3><a href="#">卡通网页游戏乐土</a></h3>
</li>
</ul>
</div>
<a href="#right" class="scroll s2" title="向右滚动">向右滚动</a>
</div>
</body>
</html>