您的位置：首页 > 其它

图片新闻的动态切换

2012-12-11 18:12 232 查看

很多新闻网页里面都有图片切换的效果，今天写了一个简单的。

<html>

<head>

<title>图片新闻切换</title>

<style type=text/css>

#Container{width:400px;height:300px;background:red;margin:0 auto;z-index:1}

#top{width:400px;height:260px;margin:0 auto;z-index:999}

#bottom{width:400px;height:40px;margin:0 auto;z-index:999;position:absolute;top:260;left:0}

#DemoPic{width:400px;height:300px;z-index:1;position:absolute;}

.BtnStyle {width:28px;height:28px;background:green;float:right;margin:2px 2px auto;z-index:999;}

.BtnStyleFocus{width:28px;height:28px;background:red;float:right;margin:2px 2px auto;z-index:999;border-width:4;border-style:solid;border-color:white;}

</style>

<script language=javascript type=text/javascript>

var PicSrc={};//定义图像数组用于存储切换的图像

var PicLink={};//定义点击图像的链接地址

PicSrc[0]="1.jpg";

PicLink[0]="http://www.51cto.com";

PicSrc[1]="2.jpg";

PicLink[1]="http://blog.51cto.com";

PicSrc[2]="3.jpg";

PicLink[2]="http://developer.51cto.com";

PicSrc[3]="4.jpg";

PicLink[3]="http://database.51cto.com";

PicSrc[4]="5.jpg";

PicLink[4]="http://mobile.51cto.com";

CurrentID=0;

var TimerID;

function SwitchPic(PicSrcID){

document.getElementById("DemoPic").src=PicSrc[PicSrcID];//切换的源图像

document.getElementById("PicLinkAddr").href=PicLink[PicSrcID];//图像的点击链接

CurrentID=PicSrcID;//设置当前的ID

for(i=0;i<5;i++){ document.getElementById("Button"+i).className="BtnStyle";};//设置小按钮的CSS，还原

document.getElementById("Button"+PicSrcID).className="BtnStyleFocus";//设置当前小按钮的焦点

DemoPic.style.visibility="hidden";//先隐藏

if(DemoPic.style.visibility=="visible"){

DemoPic.style.visibility="hidden";

}

else

{

DemoPic.style.visibility="visible";

}

StopSwith();//停止切换

}

function Play(){

if(CurrentID==4){ CurrentID=0; }

else{ CurrentID=CurrentID+1;};

SwitchPic(CurrentID);

TimerStart();

}

function TimerStart(){ TimerID=setTimeout(Play,2000); }

function StopSwith(){ clearTimeout(TimerID);}

window.onload=function(){ TimerStart();}

</script>

</head>

<body>

<div id=Container>

<a href="http://blog.51cto.com/" id=PicLinkAddr target=_blank>

<img id=DemoPic src="1.jpg"/>

</a>

<div id=top> </div>

<div id=bottom>

<div class=BtnStyle id=Button4>4</div>

<div class=BtnStyle id=Button3>3</div>

<div class=BtnStyle id=Button2>2</div>

<div class=BtnStyle id=Button1>1</div>

<div class=BtnStyle id=Button0>0</div>

</div>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航