层级轮播图（animate）

层级轮播图（animate）

css

    <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>

　　html、js

<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>