一：轮播之简单切换

首先我做一个重点的介绍，然后下面再对代码进行具体的说明。轮播图在html中主要是用<div>和<ul>标签构成的；而对css的设置，必要的一点是要对大盒子<div>中设置position:relative,<ul>中设置position:absolute，这个主要就是对其进行定位设置，以便准确的切换图片，另外一点就是要对<div>大盒子设置宽高以及overflow:hidden，否则图片很有可能就是一列排了下来；对于js代码，其实也就只有两个函数，一个就是控制它的位置的改变，而另一个函数就是利用循环实现自动切换。话不多说了，下面来看代码。

1.html代码，对，就是这么简单。

​<div id="sowing">
	<ul id="sowing_ul">
		<li><img src="p1.jpg"></li>
		<li><img src="p2.jpg"></li>
		<li><img src="p3.jpg"></li>
		<li><img src="p4.jpg"></li>
		<li><img src="p5.jpg"></li>
	</ul>
</div>

2.css代码，其实重点也是上面说的关于定位的问题，当然，也可以设置其他更多的样式。

#sowing{
	width: 750px;
	height: 350px;
	position: relative;
	overflow: hidden;
	margin: 30px auto;
}
#sowing_ul{
	position: absolute;
}
#sowing_ul img{
	vertical-align: top;
	width: 750px;
	height: 350px;
}

3.js代码，重点来了，好好理解，其实也是蛮简单的。

window.onload=function(){
    //首先肯定是要获取id位置的，然后你要进行定义时间以及计数进行切换的变量
    var sowing=document.getElementById('sowing'),
        sowing_ul=document.getElementById('sowing_ul'),
        //list主要是用来计数共有几张图片的
        list=document.getElementById('sowing_ul').getElementsByTagName('li'),
        index=0,
        timer=null;

    //先来看一下是如何改变图片的位置的函数
    function changeoptions(curindex){//curindex为参数
        //循环主要是用来排列每张图片的位置的，这样就可以计算每张图片应移动的高度
        for(var j=0;j<list.length;j++){
            list[j].className='';
            sowing_ul.style.top=0;  
        }
        //这里就是让当前图片移动到顶部了
        sowing_ul.style.top=-curindex*350+'px';
        index=curindex;
    }

    //然后来看一下如何让图片切换的函数
    function autoplay(){
        //index计数
        index++;
        //判断是否轮播到最后一张图片，若是，则返回到第一张
        if(index>=list.length){
            index=0;
        }
        //调用changeoptions()函数，让图片移到顶部
        changeoptions(index);  
    }

    //当然，控制图片的自动切换是要用到setInterval()方法的
    //调用autoplay函数，并设置切换时间
    timer=setInterval(autoplay,2000);

    //利用onmouseover和onmouseout事件控制鼠标划过离开时图片的播放
    //而要清除setInterval()方法是要用到clearInterval()的

    // 鼠标划过整个容器时停止自动播放
    sowing.onmouseover=function(){ 
        clearInterval(timer);
    }

    // 鼠标离开整个容器时继续播放至下一张
    sowing.onmouseout=function(){
        timer=setInterval(autoplay,2000);
    }

    //到此，图片轮播就完成了，并且加入了鼠标控制
}

回看一下是不是也挺简单的呢！

除此之外，我们会发现一些网站的轮播图上都会带有下标1、2、3、4，那么这些下标是怎么来的呢？当然不是图片上的了，因为还有背景颜色的切换呢，那这个也是可以利用js来实现的。

二：带有下标的轮播图

1.在html代码中只需要再加入一个<ol id="list">标签，然后在<li>中添加1、2、3、4、5，就可以了，不过要注意的一点是，在第一个<li>标签中要添加一个类"active"，目的就是控制背景颜色的切换。

2.<ol>的css代码主要也是位置的控制，也需要添加position:absolute，然后就可以把它定位到你想要的位置。对于<ol>下的<li>和"active"可以设置不同的背景颜色和字体颜色，加以区别。而其他样式可以自己设置，例如宽高，圆角等，这里我也不再加入代码了。

3.js改变的就是有关<ol>的部分，主要区别来看代码。

window.onload=function(){
    //首先肯定是要获取id位置的，然后你要进行定义时间以及计数进行切换的变量
    var sowing=document.getElementById('sowing'),
        sowing_ul=document.getElementById('sowing_ul'),

        //list主要是用来计数共有几张图片的
        //list的id变了，但效果是一样的，区别是可以对<ol>也进行控制
        list=document.getElementById('list').getElementsByTagName('li'),

        index=0,
        timer=null;

    //先来看一下是如何改变图片的位置的函数
    function changeoptions(curindex){//curindex为参数
        //循环主要是用来排列每张图片的位置的，这样就可以计算每张图片应移动的高度
        for(var j=0;j<list.length;j++){
            list[j].className='';
            sowing_ul.style.top=0;  
        }

        //改变下标的背景颜色
        list[curindex].className='active';

        //这里就是让当前图片移动到顶部了
        sowing_ul.style.top=-curindex*350+'px';
        index=curindex;
    }

    //然后来看一下如何让图片切换的函数
    function autoplay(){
        //index计数
        index++;
        //判断是否轮播到最后一张图片，若是，则返回到第一张
        if(index>=list.length){
            index=0;
        }
        //调用changeoptions()函数，让图片移到顶部
        changeoptions(index);  
    }

    //当然，控制图片的自动切换是要用到setInterval()方法的
    //调用autoplay函数，并设置切换时间
    timer=setInterval(autoplay,2000);

    //利用onmouseover和onmouseout事件控制鼠标划过离开时图片的播放
    //而要清除setInterval()方法是要用到clearInterval()的

    // 鼠标划过整个容器时停止自动播放
    sowing.onmouseover=function(){ 
        clearInterval(timer);
    }

    // 鼠标离开整个容器时继续播放至下一张
    sowing.onmouseout=function(){
        timer=setInterval(autoplay,2000);
    }

    //增加一个for循环，使得遍历数字导航时实现切换至对应的图片
    for(var i=0;i<list.length;i++){
        list[i].id=i;
        list[i].onmouseover=function(){
            clearInterval(timer);
            changeoptions(this.id); 
        }
    }

}

最后，一个简单的轮播图就完成了。

再简单回顾一下用到的要点：定位隐藏问题，js的两个函数实现切换，setInterval()和clearInterval()对函数周期性的调用，onmouseover和onmouseout事件对鼠标的控制，for循环实现数字导航划过时切换至对应的图片，似乎也就这些了。