<div class="out">

     <ul class="img">

         <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

         <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

     </ul>

     <ul class="num"></ul>

     <div class="left btn"><</div>

     <div class="right btn">></div>

 </div>

<style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style: none;

        }

        .out{

            width: 730px;

            height: 454px;

            margin: 50px auto;

            position: relative;

        }

        .out .img li{

            position: absolute;

            left: 0;

            top: 0;

        }

        .out .num{

            position: absolute;

            left:0;

            bottom: 20px;

            text-align: center;

            font-size: 0;

            width: 100%;

        }

        .out .btn{

            position: absolute;

            top:50%;

            margin-top: -30px;

            width: 30px;

            height: 60px;

            background-color: aliceblue;

            color: black;

            text-align: center;

            line-height: 60px;

            font-size: 40px;

            display: none;

        }

        .out .num li{

            width: 20px;

            height: 20px;

            background-color: black;

            color: #fff;

            text-align: center;

            line-height: 20px;

            border-radius: 60%;

            display: inline;

            font-size: 18px;

            margin: 0 10px;

            cursor: pointer;

        }

        .out .num li.active{

            background-color: red;

        }

        .out .left{

            left: 0;

        }

        .out .right{

            right: 0;

        }

        .out:hover .btn{

            display: block;

            color: white;

            font-weight: 900;

            background-color: black;

            opacity: 0.8;

            cursor: pointer;    /* 页面显示一个手势样*/

        }

        .out img {

            height: 100%;

            width: 100%;

        }

    </style>

<script src="jquery-1.9.1.min.js"></script>

<script>

    $(function(){

        var size=$(".img li").size();  //首先获取到图片的长度

        for (var i= 1;i<=size;i++){

            var li="<li>"+i+"</li>";

            $(".num").append(li); //动态添加底部小圆点

        }

        $(".num li").eq(0).addClass("active");

        $(".num li").mouseover(function(){

            $(this).addClass("active").siblings().removeClass("active"); //给你放上的底部圆点添加样式，其它的圆点去掉active样式

            var index=$(this).index();

            i=index;

            $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); //第index个图片淡入，其它的图片淡出

        });

        i=0;

        var t=setInterval(move,1500);// setInterval方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭

        function move(){

            i++;

            if(i==size){

                i=0; //达到图片的尾部时，返回开头

            }

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

        }

        function moveL(){

            i--;

            if(i==-1){

                i=size-1;

            }

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

        }

        $(".out").hover(function(){  //鼠标悬停时，停止调用函数

            clearInterval(t);

        },function(){    //鼠标移开之后定时器启动

            t=setInterval(move,1500);

        });

        $(".out .right").click(function(){

            move()

        });

        $(".out .left").click(function(){

            moveL()

        })

    });

</script>