您当前的位置: 首页 > 

dawn

暂无认证

  • 7浏览

    0关注

    204博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

图片新闻的动态切换

dawn 发布时间:2012-12-11 18:12:01 ,浏览量:7

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



图片新闻切换

      #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;}


    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            
关注
打赏
1664252102
查看更多评论
0.0441s