纯JavaScript写的轮播图效果

使用方法：

CSS样式

#banner{width:400px;margin:30px auto 0;position:relative;}
#tab{width:400px;height:320px; margin:0px auto;overflow:hidden;}
#banner ul li{list-style:none;}
#tab>li:not(:first-child){display:none;} 
#list{position:absolute;z-index:2;bottom:10px;right:10px;}
#list li{display: inline-block;height:10px;width:10px;background:#CCCCCC;border:1px solid #666666;margin-left:5px;color:#000000;line-height: 10px;font-size:8px;text-align: center;cursor:pointer;}
#list .on{background:red;color:#FFFFFF}
#btn{z-index: 3;display: none;}
#btn a{width:60px;height:60px;position:absolute;top:130px;opacity:0.5;}
#btn .prev{left:20px;background:url(img/btn.gif) left 0px no-repeat;}
#btn .next{right:20px;background:url(img/btn.gif) left -60px no-repeat;}

JavaScript结构

window.onload=function()
{
    var oBanner=document.getElementById('banner');//获取图片列表id
    var oTab=document.getElementById('tab');//获取图片列表id
    var aPic=oTab.getElementsByTagName('li');//将图片li定义为数组
    var oList=document.getElementById('list');//获取编号列表id
    var aList=oList.getElementsByTagName('li');//将编号列表Li定义为数组
    var oBtn=document.getElementById('btn');
    var oPrev=document.getElementById("prev");
    var oNext=document.getElementById("next");
    
    var index=0;
    var timer=null;
    
    //自动播放
    timer=setInterval(autoPlay,1000);//此处调用autoPlay函数时，（）不能带，带就出错
    
    //鼠标悬浮时，停止轮播
    oBanner.onmousemove=function()
    {
        oBtn.style.display='block';
        clearInterval(timer);
    }
    
    //鼠标离开，继续轮播
    oBanner.onmouseout=function()
    {
        oBtn.style.display='none';
        timer=setInterval(autoPlay,1000);//此处必须重新设置定时器
    }
    
    //点击左边按钮，上一页
    oPrev.onclick=function()
    {
        index=index-1;
        if(index<0)
        {
            index=aPic.length-1;
        }
        changePic(index);
    }
    
    //点击右边按钮，下一页
    oNext.onclick=function()
    {
        index=index+1;
        if(index==aPic.length)
        {
            index=0;
        }
        changePic(index);
    }
    
    //播放函数
    function autoPlay()
    {
        
        index=index+1;
        if(index==aPic.length)
        {
            index=0;
        }
        changePic(index);
    }
    
    //把数字与图片对应起来
    for(var i=0;i<aList.length;i++)
    {
        aList[i].onmouseover=function()
        {
            clearInterval(timer);
            index=this.innerText-1;
            changePic(index);
        }
    }
    
    //图片、编号切换
    function changePic(curIndex)
    {
        for(var i=0;i<aPic.length;i++)
        {
            aPic[i].style.display='none';
            aList[i].className='';
        }
        aPic[curIndex].style.display="block";
        aList[curIndex].className="on";
    }
}

HTML结构

<div id="banner">
    <ul id="tab">
        <li><img src="img/1.jpg" width="400" height="320"/></li>
        <li><img src="img/2.jpg" width="400" height="320"/></li>
        <li><img src="img/3.jpg" width="400" height="320"/></li>
        <li><img src="img/4.jpg" width="400" height="320"/></li>
        <li><img src="img/5.jpg" width="400" height="320"/></li>
        <li><img src="img/6.jpg" width="400" height="320"/></li>
    </ul>
    <ul id="list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div id="btn">
        <a href="javascript:;" class="prev" id="prev"></a>
        <a href="javascript:;" class="next" id="next"></a>
    </div>
</div>