轮播图，完全用JavaScript写的，没用到jQuery很适合js初学者学习

收藏

非常适合js初学者学习，每一步都有详细的注释，和易错点

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

//自动播放 
            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"; 
            } 
             
        }