程序代码如下：
<style>
*{
margin:0;
padding:0;
}
#container{
height:220px;
width:650px;
position:relative;
overflow:hidden;
margin:0 auto;
}
#container ul{
position:absolute;
top:0;
left:0;
}
#container ul li{
list-style:none;
float:left;
}#container ol li{
list-style:none;
float:left;
height:20px;
width:20px;
background-color:#F9C;
margin-left:10px;
text-align:center;
cursor:pointer;
border:1px solid #F06;
}
#container ol {
position:absolute;
bottom:15px;
right:20px;
z-index:500;
}
#container ol .active{
background-color:#C09;
}
</style>
<script>
window.onload=function()
{
var odiv=document.getElementById('container');
var abtn=odiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oul=odiv.getElementsByTagName('ul')[0];
var now=0;
for(var i=0;i<abtn.length;i++)
{
abtn[i].index=i;
abtn[i].onclick=function()
{
now=this.index;
tab();
}
}
function tab()
{
for(var i=0;i<abtn.length;i++)
{
abtn[i].className="";
}
abtn[now].className='active';
startMove(oul,{left:-650*now});
}
function next()
{
now++;
if(now==abtn.length)
{
now=0;
}
tab();
}
var timer=setInterval(next,2000);
odiv.onmouseover=function()
{
clearInterval(timer);
}
odiv.onmouseout=function()
{
timer=setInterval(next,2000);
}
}
//以下是一个动画封装函数
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
var alpha=30;
function startMove(obj,json,fn){
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json)
{
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur!=json[attr]){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+'px';
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},30)
}
</script>
</head>
<body>
<div id="container">
<ol >
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><img src="images/a.png"/></li>
<li><img src="images/b.png"/></li>
<li><img src="images/c.png"/></li>
<li><img src="images/d.png"/></li>
<li><img src="images/e.png"/></li>
</ul>
</div>
</body>
</html>
就是在运行过程中前一张图片滑过去之后 另一张图片并没有马上跟过来 然后就留了一点空白，等前一张图片完全消失后 后面一张图片才突然冒出来，不知道为什么会出现这种情况，求助，谢谢。
qq_预_1
相关分类