层级轮播图

逃跑的火焰

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

[HTML] 纯文本查看 复制代码

<div class="wrap">
    <ul>
        <li style="z-index:0;left:0;"><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="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>