天天上510CTO,看着首页的图片切换,同事让我把那个图片切换的效果弄下来,我试了一下,太麻烦了,就写了个简单的,这倒是让我对HTML+CSS+JavaScript组合有了兴趣。
以前做网站开发,看着别人好的东西直接拿下来用,很少看里面的实现,JavaScript很少用,CSS资料几乎没有看过,现在看来是过于肤浅了,对有些技术应该学好学扎实。
昨天晚上的DIV定位让我头晕,好歹算是看明白了一些,下面是实现的动态图片切换的网页。
接下来看看滤镜,好好丰富效果。
<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. TimerStart();}
以前做网站开发,看着别人好的东西直接拿下来用,很少看里面的实现,JavaScript很少用,CSS资料几乎没有看过,现在看来是过于肤浅了,对有些技术应该学好学扎实。
昨天晚上的DIV定位让我头晕,好歹算是看明白了一些,下面是实现的动态图片切换的网页。
接下来看看滤镜,好好丰富效果。
<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. 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>
</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>