新手必学轮播图

轮播图我们在网站中经常看到，主要就是为了在有限的空间内展示出更多的内容，同时也增加了界面的特效，让页面不是那么死版，让界面动起来，看着更加舒服，话不多说，代码如下：

效果：

HTML代码：

<div id="slide"> 
  <!-- 图片区 -->
    <div id="pic">
        <div class="current"><img src="images/0.jpg" alt=""></div>
        <div><img src="images/1.jpg" alt=""></div>
        <div><img src="images/2.jpg" alt=""></div>
        <div><img src="images/3.jpg" alt=""></div>
        <div><img src="images/4.jpg" alt=""></div>
    </div>
  <!-- 控制点 -->
    <ol id="control">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
   <!-- 箭头控制区 -->
    <div id="arrow">
        <a class="arrow arrow-left" href="#"><img src="images/arr-left.png" alt=""></a>
        <a class="arrow arrow-right" href="#"><img src="images/arr-right.png" alt=""></a>
    </div>
</div> 

　CSS样式：

#slide{width: 500px; height: 313px; margin: 30px auto; position: relative;}//轮播区
#pic div{width: 500px; height: 313px; display:none;}//轮播图
#pic div.current{display: block;}//当前显示轮播
#control{list-style: none; position: absolute; left: 50%; margin-left: -50px; bottom: 15px;}//控制点
#control li{width: 12px; height: 12px; margin-right: 10px; background: #ddd; border-radius: 50%;float: left;}
#control li.current{background: #f00;}//当前控制点样式
#control li:hover{cursor: pointer;}
#arrow{position: absolute; top: 50%;width: 100%; display: none;}//箭头指示器
#arrow .arrow{display: inline-block; width: 32px; height: 32px; background: rgba(0,0,0,0.3);}
#arrow .arrow.arrow-right{float: right;} 

JS代码：

window.onload=function(){
    //轮播区
    var slide=document.getElementById('slide');
    //图片区
    var pic=document.getElementById('pic').getElementsByTagName('div');
    //控制区
    var lis=document.getElementById('control').getElementsByTagName('li');
    //箭头控制区
    var arrows=document.getElementById('arrow');
    var arrs=arrows.getElementsByClassName('arrow');
    //自动轮播
    var timer=setInterval(move,1000);
    //定义初始化索引
    var index=0;
    //自动轮播
    function move(){
    //清除当前索引样式
        pic[index].className='';
        //清除当前控制区样式
        lis[index].className='';
        index++;
        if(index==pic.length){
            index=0;
        }
        pic[index].className='current';
        lis[index].className='current';
    }
    //控制区控制轮播
    for (var i=0; i<lis.length; i++){
        //保存当前索引
        lis[i]._index=i;
        lis[i].onclick=function(){
            //去除当前样式
            lis[index].className='';
            //隐藏当前内容区
            pic[index].className='';
            //修改当前样式
            this.className='current';
            //修改当前图片
            pic[this._index].className='current';
            //修改当前索引
            index=this._index;
        }
    }
    //箭头控制轮播
    //上一张
    arrs[0].onclick=function(){
        movePre();
    }
    //下一张
    arrs[1].onclick=function(){
        move();
    }
    //鼠标经过轮播区停止轮播
    slide.onmouseover=function(){
        clearInterval(timer);
        arrows.style.display='inline-block';
    }
    //鼠标离开继续轮播
    slide.onmouseout=function(){
        timer=setInterval(move,1000);
        arrows.style.display='none';
    }
    function movePre(){
        //清除当前样式
        pic[index].className='';
        lis[index].className='';
        index--;
        if (index==-1) {
            index=pic.length-1;
        }
        pic[index].className='current';
        lis[index].className='current';
    }
} 

简单的轮播就这么完成了，并没有想象中的那么难，需要的拿去，不谢