层级轮播图 | 易学教程

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
    <script>
        
  </script>  
</head>
<body>
<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>
</body>
</html>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
   //大图使用定位，将其定位在右边,所以改变的是zIndex和left值
    var timer = null;
    var index = 0;
    var $ulist = $("ul li");
    var $olist = $("ol li");
    timer = setInterval(auto,1500);
    function auto(){
        index++;
        if(index == $olist.size()){
            index = 0;
        }
        $olist.eq(index).addClass("active").siblings().removeClass("active");
        $ulist.eq(index).animate({left : 0},1500,function(){
            //运动完成后，将当前图片的zIndex设为0隐藏，
            //同时将其他图片的zIndex设为1，left值设为650px
            //这样当轮到某个图片时，使用动画将其left值设为0，因为其本身的zIndex为1，则将其显示出来
            $(this).css("zIndex",0).siblings().css({zIndex : 1,left : 650});
        });
    }
    //鼠标移入移出事件
    $olist.hover(function(){
        clearInterval(timer);
        index = $(this).index() - 1;
        auto();
    },function(){
        timer = setInterval(auto,1500);
    })
</script>
来源：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529131.html
标签
轮播