层级轮播图

Posted lemon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了层级轮播图相关的知识，希望对你有一定的参考价值。

<!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 ol {
            margin-top: 50px;
        }

        .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: 0;
        }

        .wrap > ol > li {
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid white;
          
           border-radius: 10px;
            background: Gray;
           
        }

        .wrap > ol > li:hover {
            cursor: pointer;
        }

        .wrap li.active {
            padding: 1px;
            color: orange;
            margin-top: -2px;
           
            border: 1px solid orange;
            
        }
    </style>
  <script type="text/javascript" src="jquery-1.11.1.min.js" ></script>
    <script>
        $(document).ready(function () {
            var zIndex = 0;
            $(".wrap > ol > li").mouseenter(function () {
                zIndex++;
                $(this).addClass("active").siblings().removeClass("active");
                $(".wrap > ul > li")
                        .eq($(this).index())
                        .css({
                            "z-index": zIndex,
                            "left": 650
                        })
                        .animate({
                            "left": 0
                        }, 1000);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li style="z-index:1;"><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/4.jpg" alt=""/></li>
        <li><img src="img/5.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>

 

以上是关于层级轮播图的主要内容，如果未能解决你的问题，请参考以下文章

jQuery实现的层级轮播图

JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级旋转轮播图正则表达式验证表单注册账号

Jquery基础（动画效果的轮播图特效）

无缝轮播图的一种方式原理

织梦DEDE轮播代码，从几个网站复制了几段轮播代码过来，轮播图有图，但不轮播，为啥？没用CSS和JS

网页HTML代码制作轮播图效果