您的位置：首页 > 其它

带缓存的一个图片动态的上翻效果

2012-12-11 16:29 232 查看

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片滚动（仿惠惠网）</title>

<meta name="Keywords" content="图片滚动（仿惠惠网）" />

<meta name="Description" content="图片滚动（仿惠惠网）" />

<style>* {margin:0;padding:0}</style>



<script type="text/javascript">

window.onload=function(){

var oTab=document.getElementById("tab-wrap");

var oList=oTab.getElementsByTagName("ul")[0];

var aLi=oTab.getElementsByTagName("li");

var aImg=oTab.getElementsByTagName("img");

var aDiv=oTab.getElementsByTagName("div");

var sWidth=aImg[0].offsetHeight;

var index=i=0;

var timer=playTimer=null;

var bOrder=true;

var aTmp=[];

var aLib=[0];

var aClor=[["#DF2526","#00B5E4"],["#AAC901","#DF2018"],["#07FFF1","#FF650F"],["#9670C3","#49BCFD"]];

//

for(i=0;i<aLi.length;i++){

aTmp.push("<li></li>")

}

var oCount=document.createElement("ul");

oCount.className="count";

oCount.innerHTML=aTmp.join("");

oTab.appendChild(oCount);

//

var aBtn=oTab.getElementsByTagName("ul")[1].getElementsByTagName("li");

for(i=0;i<aBtn.length;i++){

aBtn[i].index=i;

aBtn[i].onclick=function(){

index=this.index;

aLib.push(index);

if(aLib.length>2){aLib.shift()};

for(i=0;i<aBtn.length;i++){

aBtn[i].className="";

aLi[i].style.zIndex=100;

aLi[i].style.display="none";

}

aBtn[index].className="current";

aLi[index].style.zIndex=200;

aLi[index].style.top=sWidth+"px";

aLi[index].style.display="block";

aLi[aLib[0]].style.display="block";

aLi[index].style.background=aClor[index][0];

aDiv[index].style.background=aClor[index][1];

if(aLib[0]!=aLib[1]){

showMove(aLi[index])

}else {

aLi[index].style.top=0;

}

}

}

//

aBtn[index].className="current";

aLi[index].style.zIndex=200;

aLi[index].style.background=aClor[index][0];

aDiv[index].style.background=aClor[index][1];

autoPlay();

//

oTab.onmouseover=function(){

clearInterval(playTimer);

}

oList.onmouseout=function(){

autoPlay();

}

//

function autoPlay(){

playTimer=setInterval(function(){

index==aBtn.length-1 && (bOrder=false);

index==0 && (bOrder=true);

bOrder ? index++ : index--;

//console.log(index);

aBtn[index].onclick();

},5000)

}

//

function showMove(obj){

clearInterval(timer);

timer=setInterval(function(){

doMove(obj)

},30)

}

//

function doMove(obj){

var iSpeed=obj.offsetTop/10;

iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

obj.offsetTop<=0 ? clearInterval(timer) : obj.style.top=obj.offsetTop-iSpeed+"px";

}

}

</script>



<link rel="stylesheet" type="text/css" href="lib/css/reset.css" />

<style>

body{background:#000;text-align:center;font:12px/20px Arial;}

#tab-wrap {width:100%;position:relative;overflow:hidden;}

#tab-wrap .list {position:relative;height:252px;}

#tab-wrap .list li {position:absolute;top:0;left:0;width:100%;height:252px;}

#tab-wrap .list li img {margin:0 auto;width:990px;}

#tab-wrap .list li .bg-right {position:absolute;top:0;right:0;width:50%;height:252px;z-index:-1;}

#tab-wrap .count {position:absolute;left:50%;width:10px;height:100px;top:100px;margin-left:470px;z-index:300;}

#tab-wrap .count li {float:left;width:10px;height:10px;background:#ccc;margin-bottom:10px;}

#tab-wrap .count li:hover{cursor:pointer;}

#tab-wrap .count li.current {background:#85BE2E;}

</style>

</head>

<body>

<div id="tab-wrap">

<ul class="list">

<li>

<img src="http://js.alixixi.com/UploadPic/2012-11/20121119116640990.jpg" width="990" height="252" />

<div class="bg-right"></div>

</li>

<li>

<img src="http://js.alixixi.com/UploadPic/2012-11/201211191164436085.jpg" width="990" height="252" />

<div class="bg-right"></div>

</li>

<li>

<img src="http://js.alixixi.com/UploadPic/2012-11/201211191171259810.jpg" width="990" height="252" />

<div class="bg-right"></div>

</li>

<li>

<img src="http://js.alixixi.com/UploadPic/2012-11/201211191172831190.jpg" width="990" height="252" />

<div class="bg-right"></div>

</li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航