今天仿照李炎恢老师的视频做了个图片轮播。
我图片的高度和宽度都设置一样的了。
但在图片切换的过程中，当前窗口显示的图片总有着上一张或者下一张的影子。
请教前辈们看看，指出一下，谢谢。
<!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=gb2312" />
<title> 测试轮播 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript">
function getByClass(className,context){
context=context || document;
if(context.getElementsByClassName){
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByClassName('*'),
ret=[];
for(var i=0;i<nodes.length;i++){
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className){
var names=node.className.split(/\s+/);
for(var i=0;i<names.length;i++){
if(names[i]==className) return true;
}
return false;
}
//下面是动画函数
/*参数说明
curTime:当前时间，即动画已经进行了多长时间，开始时间为0.
start:开始值。
dur:动画持续多长时间
alter:总的变化量
*/
function animate(o,start,alter,dur,fx){
var curTime=0;
var t=setInterval(function(){
if (curTime>=dur) clearTime(t);
for(var i in start){
o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
}
curTime+=50;
},50);
}
function Linear(start,alter,curTime,dur) {
return start+curTime/dur*alter;
}//最简单的线性变化，也就是匀速运动
function Quad (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,2)*alter;
}
//动画结束
</script>
<script type="text/javascript">
window.onload=function(){
var number=getByClass('buttons')[0];
var btns=number.getElementsByTagName('li');
var scrollContent=getByClass('scrollContent')[0];
var cur=btns[0],t;
for (var i=0;i<btns.length;i++){
(function(i){
btns[i].onmouseover=function(){
clearTimeout(t);
//scrollContent.style.top=(-i*260)+"px";
var top=parseInt(scrollContent.style.top) || 0;
animate(scrollContent,{top:top},{top:(-i*260)-top},400,Quad)
for(var j=0;j<btns.length;j++){
btns[j].className="";
}
this.className="hover";
cur=this;
};
btns[i].onmouseout=function(){
t=setTimeout(fn,2000);
} //移开鼠标
btns[i].index=i;
})(i);
}
btns[0].onmouseover();//对第一个执行动作
t=setTimeout(fn,2000); //停留2秒
function fn(){
var nextIndex=cur.index+1;
if(nextIndex==btns.length){
nextIndex=0;
}
btns[nextIndex].onmouseover();
t=setTimeout(fn,2000);
}
};
</script>
</head>
<body>
<div id="flashBox">
<div class="scrollFrame">
<div class="scrollContent">
<a href="#" target="_blank"><img src="images/flash1.jpg" alt="第1张" /></a>
<a href="#" target="_blank"><img src="images/flash2.jpg" alt="第2张" /></a>
<a href="#" target="_blank"><img src="images/flash3.jpg" alt="第3张" /></a>
<a href="#" target="_blank"><img src="images/flash4.jpg" alt="第4张" /></a>
<a href="#" target="_blank"><img src="images/flash5.jpg" alt="第5张" /></a>
</div>
<ul class="buttons">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<ul>
</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消