自动切换到第五张的时候,回到第一张它的运行方向是向下我想它一直向上运动~~~
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>淘宝幻灯片上下滑动效</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
body { background: #ecfaff; }
.play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }
ol { position: absolute; right: 5px; bottom: 5px; z-index: 2; }
ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
ul { position: absolute; top: 0; left: 0; z-index: 1; }
ul li { width: 470px; height: 150px; float: left; }
ul img { float: left; width: 470px; height: 150px; }
</style>
<script type="text/javascript" >
window.onload=function()
{
var oPlay=document.getElementById('play');
var oOl=oPlay.getElementsByTagName('ol')[0];
var aLi1=oOl.getElementsByTagName('li');
var oUl=oPlay.getElementsByTagName('ul')[0];
var aLi2=oUl.getElementsByTagName('li');
var i=iNum=direction=0;
var times=null;
var play=null;
for(i=0;i<aLi1.length;i++)
{
aLi1[i].index=i;
aLi1[i].onclick=function()
{
iNum=this.index;
show();
};
}
//按钮点击后调用的函数
function show()
{
for(i=0;i<aLi1.length;i++)
{
aLi1[i].className='';
}
aLi1[iNum].className='active';
startMove(-(iNum*150));
}
//自动播放转向
function autoPlay()
{
if(iNum>=aLi1.length-1)
{
direction=1;
}
else if(iNum<=0)
{
direction=0;
}
if(direction==0)
{
iNum++;
}
else if(direction==1)
{
//iNum--;
iNum=0;
}
show();
}
//自动播放
play=setInterval(autoPlay,3000);
//鼠标移入展示区停止自动播放
oPlay.onmouseover=function()
{
clearInterval(play);
};
//鼠标移出展示区开启自动播放
oPlay.onmouseout=function()
{
play=setInterval(autoPlay,3000);
};
function startMove(iTarget)
{
clearInterval(times);
times=setInterval(function()
{
doMove(iTarget);
},30);
}
function doMove(iTarget)
{
var iSpeed=(iTarget-oUl.offsetTop)/10;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(oUl.offsetTop==iTarget)
{
clearInterval(times)
}
else
{
oUl.style.top=oUl.offsetTop+iSpeed+'px';
}
}
};
</script>
</head>
<body>
<div class="play" id="play">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="javascript:;"><img src="http://miaov.com/images/power_point_pic/1.png" alt="广告一" /></a></li>
<li><a href="javascript:;"><img src="http://miaov.com/images/power_point_pic/2.png" alt="广告二" /></a></li>
<li><a href="javascript:;"><img src="http://miaov.com/images/power_point_pic/3.png" /></a></li>
<li><a href="javascript:;"><img src="http://miaov.com/images/power_point_pic/4.png" /></a></li>
<li><a href="javascript:;"><img src="http://miaov.com/images/power_point_pic/5.png" /></a></li>
</ul>
</div>
</body>
</html>