层级轮播图（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="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=""/></l关于乡愁的诗句i>    </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 i养老服务中心ndex = 0;   var $olist = $("ol li");   var $ulist = $("ul li");   timer = tinterval( autoplay , 3000 );   function autoplay(){   index++;   if( index == $olist.size() ){   index = 0;   }   $olist.eq(ind年度考核登记表个人总结怎么写ex).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>