<!DOCTYPE html>

<html lang="en">

<head>

    <title>我的图片轮播</title>

    <meta charset="utf-8" />

<style>

*{

    margin: 0;

    padding: 0;

}

.content{

    position: relative;

    width: 300px;

    height: 280px;

    overflow: hidden;

    margin: 100px auto;

}

.imgBox{

    position: absolute;

    width: 1200px;

}

img {

width:300px;

height:250px;

}

.imgBox > li{

    float: left;

    width: 300px;

    height: 250px;

}

.currentNum{

    position: absolute;

    top: 250px;

    width: 300px;

    height: 30px;

    background-color: #47FF00;

}

.imgNum{

    float: left;

    width: 40px;

    height: 30px;

    text-align: center;

    line-height: 30px;

    cursor: pointer;

}

.current{

    background: #1400FF;

}

</style>

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

    <script>

$(document).ready(function(){

    var imgPanel = $('#imgPanel');

    var  imgNum = $('.imgNum');                  

    var  indexImg = 1;                           //初始显示图片

    var  totalImg = $("img").length;                           //图片总数量

    var  imgSize = parseInt($("img").css("width"),10);;        //图片宽度

 var  move = setInterval(moveImg, 2000);

//定时执行该函数切换图片

    function moveImg(){

        if(indexImg != totalImg){

//debugger;

            imgPanel.animate({

                left: -(indexImg*imgSize) + "px"

            }, 1000);

            imgNum.removeClass("current")

                .eq(indexImg)

                .addClass("current");

            indexImg++;

        }

        else{

            indexImg = 1;

            imgNum.removeClass("current")

                .eq(indexImg - 1)

                .addClass("current");

            imgPanel.animate({

                left: 0

            }, 1000);

        }

    }

//鼠标悬停和离开

    imgNum.hover(function(){              //鼠标悬停

        imgPanel.stop();                    //结束当前动画

        clearInterval(move);              //暂停轮播

        imgNum.removeClass("current");

        $(this).addClass("current");

        indexImg = $(this).index();

        imgPanel.animate({

            left: -(indexImg*imgSize) + "px"

        }, 500);

    },function(){                        //鼠标离开

        move = setInterval(moveImg, 2000);

    });


   

});


</script>

</head>

<body>

    <div class="content">

         <ul id="imgPanel" class="imgBox">

             <li><a href="javascript:void(0)"><img src="img/1.png"></a></li>

             <li><a href="javascript:void(0)"><img src="img/2.png"></a></li>

             <li><a href="javascript:void(0)"><img src="img/3.png"></a></li>

             <li><a href="javascript:void(0)"><img src="img/4.png"></a></li>

         </ul>

        <div id="currentNum" class="currentNum">

            <span class="imgNum current">1</span>

            <span class="imgNum">2</span>

            <span class="imgNum">3</span>

            <span class="imgNum">4</span>

        </div>

    </div>

</body>

</html>