用js做的一个图片轮转效果

来源：互联网发布：软件最大并发数编辑：程序博客网时间：2024/05/23 14:59

先要用css写好数字导航按钮的样式

#NewsPic .Nav {RIGHT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 12px}#NewsPic .Nav SPAN {DISPLAY: block; BACKGROUND: #000000; FLOAT: right; FONT: 10px Courier; BORDER-LEFT: #ffffff 1px solid; WIDTH: 24px; CURSOR: hand; COLOR: #ffffff; HEIGHT: 100%; TEXT-ALIGN: center}#NewsPic .Nav SPAN.Cur {BACKGROUND: #019fe8; COLOR: white}#NewsPic .Nav SPAN.Normal {BACKGROUND: #000000; FILTER: Alpha(opacity=50); COLOR: white; opacity: .5}#NewsPic .Nav SPAN A {DISPLAY: block; WIDTH: 100%; COLOR: white; POSITION: relative; HEIGHT: 100%}#NewsPic .Nav SPAN A:hover {CURSOR: hand}

HTML写入

            <div id="focus">                <div id="NewsPic">                    <a title="We share the futures" href="#" target="_blank" ><img class="picture" alt="" id="PicTrans" src="Image/Focus/1.jpg" /></a>                    <div id="Nav" class="Nav"></div>                    <script type="text/javascript" language="javascript">init();</script>                </div>            </div>

JS写入

var arr = new Array();var curIndex = 0;var timer;function init() {    arr[0] = "Image/Focus/1.jpg";    arr[1] = "Image/Focus/2.jpg";    arr[2] = "Image/Focus/3.jpg";    arr[3] = "Image/Focus/4.jpg";    arr[4] = "Image/Focus/5.jpg";    arr[5] = "Image/Focus/6.jpg";    //    var Nav = document.getElementById("Nav");    for (i = arr.length; i >0 ; i--)     {        var NumSpan = document.createElement("span");        NumSpan.innerHTML = "<a href=\"javascript:;\" onclick=\"javascript:clearTimeout(timer);curIndex=" + (i - 1) + ";change()\"> " + i + "</a>"; //clearTimeout(timer)防止change()并发执行        NumSpan.setAttribute("id","span"+i);        Nav.appendChild(NumSpan);    }    change();}function change() {    for (i = 0; i < arr.length; i++)     {        if (i == curIndex)            document.getElementById("span" + (i+1)).className = "Cur";        else            document.getElementById("span" + (i+1)).className = "Normal";    }    document.getElementById("PicTrans").src = arr[curIndex];    if (curIndex == arr.length - 1)        curIndex = 0;    else        curIndex += 1;    if(timer)        clearTimeout(timer);    timer= setTimeout("change()", 3000);}