2018/2/21 层级轮播图

最新推荐文章于 2022-08-29 10:15:34 发布

maggie_xff

最新推荐文章于 2022-08-29 10:15:34 发布

阅读量646

点赞数

本文链接：https://blog.csdn.net/sinat_38589469/article/details/79349438

版权

层级轮播图：每点击一个按钮层式展出

效果：图实在是不好截，大家想象一下好了，就是一层一层展出每张图片

<!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;}
        .wrapper{
            width: 670px;
            height: 240px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: default;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
    </style>

/*最最重要的js部分*/
    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 根据ol下li的索引号，匹配ul下相对应li的索引号
            $(".wrapper ol li").mouseenter(function () {
                $(this).addClass("current").siblings().removeClass("current");
                $(".wrapper ul li").eq($(this).index()).fadeIn("fast").siblings().fadeOut();
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><img src="images/1.jpg" alt=""/></li>
            <li><img src="images/2.jpg" alt=""/></li>
            <li><img src="images/3.jpg" alt=""/></li>
            <li><img src="images/4.jpg" alt=""/></li>
            <li><img src="images/5.jpg" alt=""/></li>
            <li><img src="images/6.jpg" alt=""/></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
</body>
</html>

maggie_xff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018/2/21 层级轮播图

层级轮播图：每点击一个按钮层式展出效果：图实在是不好截，大家想象一下好了，就是一层一层展出每张图片&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;styl
复制链接

扫一扫