html代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>轮播图-效果</title>
<style>
*{
margin: 0;
padding: 0;
}
#contain{
width: 590px;
height: 470px;
overflow: hidden;
position: relative;
margin: 200px auto;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
#list{
position: absolute;
}
#list img{
float: left;
}
.arrow{
text-align: center;
cursor: pointer;
font-size: 36px;
position: absolute;
top: 220px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
    <div id="contain">
        <div id="list" style="left: 0px;">
            <img src="img/1.jpg" alt="" />
            <img src="img/2.jpg" alt="" />
            <img src="img/3.jpg" alt="" />
            <img src="img/4.jpg" alt="" />
            <img src="img/5.jpg" alt="" />
        </div>
    <a href="javascript:;" id="prev">&lt;</a>
    <a href="javascript:;" id="next">&gt;</a>
    </div>
</body>
</html>


javascript实现 

<script type="text/javascript">
    var list=document.getElementById("list");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var content = document.getElementById("content")
    function on2(offset){
        //获取left值
        var left = parseInt(list.style.left)+offset;
        if(left<-590*4){
            left = 0;
        }
        if(left>0){
            left = -590*4;
        }
        list.style.left = left+"px";

}

prev.onclick=function(){
    on2(590);
};
next.onclick=function () {
    on2(-590);
}
var time;
function play() {
    time = setInterval(function(){
        next.onclick();
    },2000);
}
play();
content.onmouseover=function(){
    clearInterval(time);
}
content.onmouseout=function(){
    play();
}



</script>


jquery实现 

<script type="text/javascript">
function on(offset) {
        var a = $("#list").css("left");
        var left = parseInt(a)+offset;
        if(left<-590*4){
            left=0;
        }
        if(left>0){
            left=-590*4;
        }
        $("#list").css("left",left+"px");
    }
    $("#prev").click(function(){
        on(-590);
    });
    $("#next").click(function(){
        on(590);
    });
    var time;
    function play(){
        time=setInterval(function(){
            $("#prev").click();
        },1000);
    }
    play();
    $("#content").mouseover(function(){
        clearInterval(time);
    });//鼠标放上去停止轮播
    $("#content").mouseout(function(){
        play();
    });
</script>


css实现 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            position: relative;
            width: 850px;
            height: 470px;
            overflow: hidden;
            margin: 100px auto;
        }
        #list{
            position: absolute;
            width: 500%;
            transform: translate(0,0); /* 初始位置位移 */
            animation: po 10s linear infinite;
        }
        #list img{
           /* 控制图片大小*/
            width: 850px;
            height: 470px;

        float: left;
    }
    span{
        position: absolute;
        font-size: 50px;
        color: #ffffff;
        top: 220px;
        cursor: pointer;
    }
    #next{
        right: 0px;
    }

@keyframes po {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */

    20% {transform: translate(-20%,0);}  /*切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}

    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}

    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}

    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}

    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}
&lt;/style&gt;



</head>

<body>

<div id="content">

<div id="list" style="left:0px">

<img src="img/a.jpg" alt=""/>

<img src="img/b.jpg" alt=""/>

<img src="img/c.jpg" alt=""/>

<img src="img/4.jpg" alt=""/>

<img src="img/5.jpg" alt=""/>

</div>

</div>

</body>

</html>


bootstrap实现 

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div id="carouselMenu" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#carouselMenu" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselMenu" data-slide-to="1" ></li>
                    <li data-target="#carouselMenu" data-slide-to="2" ></li>
                    <li data-target="#carouselMenu" data-slide-to="3" ></li>
                    <li data-target="#carouselMenu" data-slide-to="4" ></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active"><img src="img/a.jpg" alt=""/></div>
                    <div class="item"><img src="img/b.jpg" alt=""/></div>
                    <div class="item"><img src="img/c.jpg" alt=""/></div>
                    <div class="item"><img src="img/d.jpg" alt=""/></div>
                    <div class="item"><img src="img/e.jpg" alt=""/></div>
                </div>
                <a class="carousel-control left" href="#carouselMenu" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#carouselMenu" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
          $('.carousel').carousel({
            interval: 3000,//轮播间隔
            pause:"hover", //鼠标悬停在轮播图上，是否停止滚动
            wrap:true,     //
            keyboard:true  //响应键盘事件
          });
         });
</script>

Q.E.D.