JavaScrip图片轮显

最新推荐文章于 2022-03-09 21:12:18 发布

skykings520

最新推荐文章于 2022-03-09 21:12:18 发布

阅读量381

点赞数

分类专栏： JavaScript 文章标签： javascript html transition filter border float

本文链接：https://blog.csdn.net/skykings520/article/details/5104164

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS代码：

#transdiv {
    position:relative;
    margin:0px auto;
    overflow:hidden;
    border:1px solid #000;
}
#transbtn {
    position:absolute;
    bottom:0px;
    left:0px;
    background:#666;
    filter:Alpha(opacity=0,finishOpacity=100,style=1);
}
#transbtn div {
    float:right;
}
#transbtn div a {
    display:block;
    width:25px;
    height:20px;
    line-height:20px;
    text-align:center;
    color:#fff;
    border-left:1px solid #fff;
    cursor:pointer;
}
#transbtn div a:link,#transbtn div a:visited,#transbtn div a:active {
    color:#fff;
    text-decoration:none;
}
#transbtn div a:hover {
    background:#ff0000;
    text-decoration:none;
}
.current {background:#ff0000;}

JavaScript：代码

//图片地址
var TransImages=new Array("/TempFolder/1.jpg","/TempFolder/2.jpg","/TempFolder/3.jpg","/TempFolder/4.jpg","/TempFolder/5.jpg");
//链接地址
var TransLinks=new Array("http://www.fengyekun.com","http://www.fengyekun.com","http://www.fengyekun.com","http://www.fengyekun.com","http://www.fengyekun.com");
//提示文本
var TransTitle=new Array("枫叶随风网","枫叶随风网","枫叶随风网","枫叶随风网","枫叶随风网");
//图片显示时间
var TransSpeed=4000

var SrcNum=0,TransId;
function TransImage(Mum){
    var ImageID=document.getElementById("transimg");
    var ButtonID=document.getElementById("transbtn");
    var TitleID=document.getElementById("transtitle");

    if (Mum==5) ImageID.src=TransImages[0];
    if (Mum!=5){
        SrcNum=Mum;
        if (TransId) clearTimeout(TransId);
    }

    for (var i=0;i<ButtonID.childNodes.length;i++){
        ButtonID.childNodes[i].firstChild.className="";
    }
    var ButtonNum;
    switch(SrcNum){
    case 0:
        ButtonNum=4;
        break;
    case 1:
        ButtonNum=3;
        break;
    case 2:
        ButtonNum=2;
        break;
    case 3:
        ButtonNum=1;
        break;
    case 4:
        ButtonNum=0;
        break;
    }
    ButtonID.childNodes[ButtonNum].firstChild.className="current";
    ImageID.parentNode.href=TransLinks[SrcNum];
    ImageID.filters(0).apply();
    ImageID.src=TransImages[SrcNum];
    ImageID.title=TransTitle[SrcNum];
    ImageID.filters.revealtrans.transition=Math.round(Math.random()*24);
    ImageID.filters(0).play();

    if (Mum==5){
        SrcNum++;
        if (SrcNum>=5) SrcNum=0;
        TransId=setTimeout("TransImage(5)",TransSpeed);
    }
    else{
        TransId=setTimeout("TransImage(5)",TransSpeed);
    }
}
function TransHTML(TransWidth,TransHeight){
    var Html="";
    Html+="<div id=/"transdiv/" style=/"width:"+TransWidth+"px; height:"+TransHeight+"px;/"><a href=/"/" target=/"_blank/"><img id=/"transimg/" src=/"/" style=/"filter:revealTrans(Transition=0,Duration=2);/" border=/"0/" /></a>";
    Html+="<div id=/"transbtn/" style=/""+TransWidth+"px;/">";
    Html+="<div><a href=/"javascript:TransImage(4);/">5</a></div>";
    Html+="<div><a href=/"javascript:TransImage(3);/">4</a></div>";
    Html+="<div><a href=/"javascript:TransImage(2);/">3</a></div>";
    Html+="<div><a href=/"javascript:TransImage(1);/">2</a></div>";
    Html+="<div><a href=/"javascript:TransImage(0);/">1</a></div>";
    Html+="</div>";
    Html+="</div>";

    document.write(Html);
    TransImage(5);
}