<style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul, ol {

            list-style: none;

        }

        .wrap {

            width: 650px;

            height: 250px;

            margin: 100px auto 0;

            position: relative;

            overflow: hidden;

        }

        .wrap img {

            display: block;

        }

        .wrap ul {

            height: 250px;

            z-index: 1;

            position: relative;

        }

        .wrap ol {

            height: 30px;

            z-index: 2;

            position: absolute;

            bottom: 0;

            right: 0;

        }

        .wrap > ul > li {

            position: absolute;

            top: 0;

            left: 650px;

        }

        .wrap > ol > li {

            float: left;

            width: 20px;

            height: 20px;

            text-align: center;

            line-height: 20px;

            border: 1px solid white;

            margin-right: 5px;

            background: Gray;

        }

        .wrap > ol > li:hover {

            cursor: pointer;

        }

        .wrap li.active {

            padding: 2px;

            color: orange;

            margin-top: -4px;

            border: 1px solid orange;

        }

    </style>

<div class="wrap">

    <ul>

        <li style="z-index:0;left:0;"><img src="data:images/01.jpg" alt=""/></li>

        <li><img src="data:images/02.jpg" alt=""/></li>

        <li><img src="data:images/03.jpg" alt=""/></li>

        <li><img src="data:images/04.jpg" alt=""/></li>

        <li><img src="data:images/05.jpg" alt=""/></li>

    </ul>

    <ol>

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ol>

</div>

<script type="text/javascript">

   var timer = null;

   	var index = 0;

   	var $olist = $("ol li");

   	var $ulist = $("ul li");

   	timer = setInterval( autoPlay , 3000 );

   	function autoPlay(){

   		index++;

   		if( index == $olist.size() ){

   			index = 0;

   		}

   		$olist.eq(index).addClass("active").siblings().removeClass("active");

   		$ulist.eq(index).animate({"left":0},1500,function(){

   			//当前运动的图片达到目标值后  将其余所有的图片恢复到left：650位置

   			 $(this).css("zIndex",0).siblings().css({"left":650,"zIndex":1})

   		})

   	}

</script>