html结构层

<div class="index-banner" id="banner">
        <div class="banner-list" id="banner_list" style="left:-1610px;">
            <a href="http://www.icourse163.org/" class="banner3" target="_blank"></a>
            <a href="http://open.163.com/" class="banner1" target="_blank"></a>
            <a href="http://study.163.com/" class="banner2" target="_blank" ></a>
            <a href="http://www.icourse163.org/" class="banner3" target="_blank"></a>
            <a href="http://open.163.com/" class="banner1" target="_blank"></a>
        </div>
        <div class="slide" id="slideBtn">
            <span index="1" class="active"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div> 
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

css表现层

.index-banner  {
    position: relative; 
    width:1610px;
    height: 461px;
    margin:0 auto; 
    overflow: hidden; 
}
.index-banner .banner-list{
    position: absolute;
    width:8050px; 
    height: 461px;
    z-index: 1;  
}
.index-banner .banner-list a{ 
    display: block; 
    float: left;
    width:1610px;
    height:461px; 
}
.banner1{  
    background: url("../images/banner1.jpg") no-repeat; 
} 
.banner2{  
    background: url("../images/banner2.jpg") no-repeat; 
} 
.banner3{  
    background: url("../images/banner3.jpg") no-repeat; 
}
.index-banner .slide{
    position: absolute;
    z-index: 2; 
    left:50%;
    margin-left:-5px;
    bottom: 20px;
}
.index-banner .slide span{
    display: inline-block;
    cursor: pointer;
    margin-right: 10px; 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
.index-banner .slide .active{
    background-color: #000;
}
.arrow { 
    cursor: pointer; 
    position: absolute;
    z-index: 2; 
    top: 180px; 
    display: none; 
    line-height: 70px; 
    text-align: center; 
    vertical-align: middle;
    font-size: 35px; 
    font-weight: bold; 
    width: 50px; 
    height: 70px;  
    background-color: RGBA(0,0,0,.3); 
    color: #fff;
}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
.index-banner:hover .arrow { display: block;}
 #prev { left: 20px;}
 #next { right: 20px;}

JS完成道理：经由过程转变图片的偏移量来完成图片的切换
完成步骤：1、经由过程documnet.getElementById()猎取页面须要操纵的元素

window.onload=function(){

var banner=document.getElementById("banner");//猎取轮播图父容器；
var list=document.getElementById("banner_list");//猎取图片列表；
var buttons=document.getElementById("slideBtn").getElementsByTagName("span");//猎取图片切换圆点按钮；
var pre=document.getElementById("prev");//猎取向左切换箭头
var next=document.getElementById("next");//猎取向右切换箭头； 

2、完成摆布箭头的切换：给摆布箭头绑定点击事宜；
题目：在摆布切换过程当中会在图片切换完会显现空缺？
处理方法：运用无穷转动的技能，即完成轮回无缝切换：
1)在页面图片列表的最先加上末了一张图片的隶属图，在末了加上第一张图片的隶属图
2)每次切换时推断切换后的位置是不是大于-1610px或是小于-4830px（即是不是切换到隶属图的位置）：
假如大于-1610px,就把图片从新定位到真正的末了一张图的位置：-4830px;
假如小于-4830px,就把图片从新定位到真正的第一张图的位置：-1610px;

var index=1;//用于寄存当前要显现的图片，初始值为第一张图片
var animated=false;//优化动画实行结果，只要当前切换动画未实行时，才被实行。处理当前动画实行未完成时，屡次点击切换按钮致使的页面卡图征象，初始值为false

pre.onclick=function(){
        //切换到当前图片左侧的图片，假如当前是第一张，会切换到末了一张
        if(index==1){
            index=3;
        }
        //否则会切换到前一张，即index-1
        else{
            index-=1;    
        }
        //每次点击时，推断animated为false时实行切换
        if(!animated){
            animate(1610);    
        }
        
        //设置当前圆点按钮款式切换到选中状况，其他圆点为未选中状况
        showBtn();
    }
next.onclick=function(){
        //切换到当前图片右侧的图片，假如当前是末了一张，会切换到第一张
        if(index==3){
            index=1;
        }
        //否则会切换到下一张，即index+1
        else{
            index+=1;    
        }
        //每次点击时，推断animated为false时实行动画
        if(!animated){
            animate(-1610);    
        }
        //设置当前圆点按钮款式切换到选中状况，其他圆点为未选中状况
        showBtn();
    }
    
    
//将偏移的行动封装到函数animate()中
function animate(offset){ 
    animated=true;//挪用animate()切换时设置为true;
    var newleft=parseInt(list.style.left)+offset;//偏移以后的位置
    var time=500;//位移总时候
    var interval=10;//位移间隔时候
    var speed=offset/(time/interval);//每次位移量 =总偏移量/次数

function go(){//递归，在函数内部挪用本身完成入场图片500ms淡入的结果            
   //推断偏移量是不是达到了目标值，假如没有，在本来的基础上继承挪动
        if((speed<0 && parseInt(list.style.left)>newleft)||(speed>0 && parseInt(list.style.left)<newleft)){
            list.style.left=parseInt(list.style.left) + speed +'px';
            //设置定时器，每隔interval的时候挪用一下go()函数
            //setTimeout()函数只会被实行一次
            setTimeout(go,interval);
        }
        //假如达到了目标值，就将newleft值设置为目标值，
        else{
            animated=false;//切换完毕，设置为false;

            //猎取当前图片的left值：用list.style.left猎取left的字符串，须要parseInt()函数将字符串转换为数值
            list.style.left = newleft+'px';
            
           //设置无缝切换
            if( newleft > -1610 ){
                list.style.left='-4830px';
            }
            if( newleft < -4830){
                list.style.left='-1610px';
            }
        }
    } 
    go();//挪用animate()时实行go()函数 

}

//将圆点按钮款式切换封装到showBtn()函数中
    function showBtn(){
        //遍历圆点按钮数组
        for(var i=0;i<buttons.length;i++){
            var button=buttons[i];
            //作废之前按钮设置的active状况
            if(button.className == 'active'){
                button.className='';
                break;
            }
        }
        //设置当前图片对应的圆点按钮状况为active
        buttons[index-1].className='active';
    }

3、完成圆点按钮点击切换：遍历底部圆点按钮数组，为每一个按钮增加点击事宜

for(var i=0;i<buttons.length;i++){
        var button=buttons[i];
        button.onclick=function(){
            //顺序优化：假如点击当前处于active状况的按钮，则不实行任何操纵
            if(this.className=='active'){
                return;//当顺序实行到这里时会退出当前函数，不会再实行背面的语句
            }
            //题目：如安在点击圆点按钮时，定位切换到对应的图片上？
            //处理方法：猎取html页面按钮上自定义的index属性值，经由过程该index值能够算出每次点击的按钮距之前按钮的偏移量，
            var myIndex=parseInt(this.getAttribute('index'));//猎取自定义的属性的值并转换为数字
            var offset=-1610 * (myIndex-index);//算出偏移量
            if(!animated){
                animate(offset);//挪用animate完成切换
            } 
            index=myIndex;//更新当前的index值
            showBtn();//挪用showBtn完成按钮的款式切换 
        }
    }
    

4、完成图片自动切换：完成每5s切换图片，图片轮回播放；

 var timer;//设置自动播放的定时器
    function play(){
            //设置定时器，每隔5s点击右键头切换按钮
            timer=setInterval(function(){ 
                next.onclick(); 
            },5000);
        }
        function stop(){
            //停息自动播放
            clearInterval(timer);
        }
    
        banner.onmouseover=stop;//鼠标悬停某张图片，则停息切换；
        banner.onmouseout=play;//鼠标移除时，继承自动切换；
    
        play();//初始化时实行自动播放
        
    }//window.onload加载完成
    

运用jquery完成以下，思绪稳定：

 $(function () {
            var banner= $('#banner');
            var list = $('#banner_list');
            var buttons = $('#slideBtn span');
            var prev = $('#prev');
            var next = $('#next');
            var index = 1; 
            var interval = 5000;
            var timer;


            function animate (offset) {
                var left = parseInt(list.css('left')) + offset;
                if (offset>0) {
                    offset = '+=' + offset;
                }
                else {
                    offset = '-=' + Math.abs(offset);
                }
                list.animate({'left': offset}, 500, function () {
                    if(left > -1610){
                        list.css('left',-4830);
                    }
                    if(left < 4830) {
                        list.css('left',-1610);
                    }
                });
            }

            function showButton() {
                buttons.eq(index-1).addClass('active').siblings().removeClass('active');
            }

            function play() {
                timer = setTimeout(function () {
                    next.trigger('click');
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 3) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-1610);
                showButton();
            });

            prev.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 1) {
                    index = 3;
                }
                else {
                    index -= 1;
                }
                animate(1610);
                showButton();
            });

            buttons.each(function () {
                 $(this).bind('click', function () {
                     if (list.is(':animated') || $(this).attr('class')=='active') {
                         return;
                     }
                     var myIndex = parseInt($(this).attr('index'));
                     var offset = -1610 * (myIndex - index);

                     animate(offset);
                     index = myIndex;
                     showButton();
                 })
            });

            banner.hover(stop, play);

            play();

        });