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

 

先要用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:;\" οnclick=\"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);
}