图片新闻的动态切换

最新推荐文章于 2018-06-05 13:39:00 发布

dawn

最新推荐文章于 2018-06-05 13:39:00 发布

阅读量815

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/dawn0718/article/details/8283704

版权

HTML+CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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

<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>