您的位置：首页 > 其它

妙味——图片无缝自动播放

2014-01-07 23:42 288 查看 
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#show-box{width: 600px;height: 300px;border: 5px solid #ccc;margin: 50px auto 0;position: relative;overflow: hidden;}
#big{width: 600px;height: 300px;position: absolute;left: 0;top: 0;}
#big li{width: 600px;height: 300px;list-style-type: none;}
.no1{background-color: #0099FF}
.no2{background-color: #00CCFF}
.no3{background-color: #00FFFF}
.no4{background-color: #00FF33}
.no5{background-color: #FF99CC}
#small{position: absolute;left: 50px;bottom: 20px;z-index: 2;}
#small li{display: block;width: 20px;height: 20px;line-height: 20px;border: 1px solid orange;margin-right: 10px;text-align: center;color: #000000;cursor: pointer;float: left;}
#small li.active{background-color: orange;color: #ffffff;font-weight: bold;}
</style>
<script src="http://files.cnblogs.com/baixc/move.js"></script>
<script>
window.onload=function()
{
var oBox=document.getElementById('show-box');
var oBig=document.getElementById('big');
var aBig=oBig.getElementsByTagName('li');
var _height=aBig[0].offsetHeight;    //获取li的高度
var oSmall=document.getElementById('small');
var aSmall=oSmall.getElementsByTagName('li');
var iNow=0;
var iNow2=0;
var timer=null;

for(var i=0;i<aSmall.length;i++){
aSmall[i].index=i;
aSmall[i].onmouseover=function(){
for(var i=0;i<aSmall.length;i++){
aSmall[i].className='';
}
this.className='active';

iNow=this.index;    //更新iNow
iNow2=this.index;

startMove(oBig,{top:-(this.index*_height)});
};
}

timer=setInterval(aotoRun,2000);

//鼠标移入清除定时器
oBox.onmouseover=function(){
clearInterval(timer);
};

//鼠标移除开启定时器
oBox.onmouseout=function(){
timer=setInterval(aotoRun,2000);
};

//自动播放
function aotoRun(){

//循环之后取消定位重置iNow2
if(iNow==0)
{
aBig[0].style.position='static';
oBig.style.top='0';
iNow2=0;
}

if(iNow == aBig.length-1){
iNow=0;
aBig[0].style.position='relative';        //设置第一个定位
aBig[0].style.top=aBig.length*_height+'px';
}
else{
iNow++;
}

iNow2++;

for(var i=0;i<aSmall.length;i++){
aSmall[i].className='';
}
aSmall[iNow].className='active';
startMove(oBig,{top:-(iNow2*_height)});
};
};
</script>
</head>
<body>
<div id="show-box">
<ul id="big">
<li class="no1">1</li>
<li class="no2">2</li>
<li class="no3">3</li>
<li class="no4">4</li>
<li class="no5">5</li>
</ul>
<ol id="small">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航