三层级伦播图

最新推荐文章于 2019-05-06 16:16:28 发布

zoekitty

最新推荐文章于 2019-05-06 16:16:28 发布

阅读量495

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/zoekitty/article/details/52608320

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul,li,ol{
            margin:0;
            padding:0;
            text-decoration: none;
            list-style: none;
        }
        .wrap{
            width:650px;
            height:250px;
            margin:100px auto;
            position:relative;
        }
        .wrap ul{
            width:650px;
            height:250px;
            position:relative;
            z-index:1;
            overflow: hidden;
        }
        .wrap ul li{
            float:left;
            width:650px;
            height:250px;
            position:absolute;
            top:0;
            left:0;

        }
        .wrap ol{
            position:absolute;
            right:10px;
            bottom:20px;
            z-index: 2;
        }
       .wrap>ol>li{
           width:20px;
           height:20px;
           float:left;
           border:1px solid white;
           margin-right:5px;
           background-color: #ccc;
           text-align: center;
       }
       .wrap>ol>li:hover{
           cursor:pointer;
       }
        .wrap>ol>.active{
            padding: 2px;
            margin-top:-4px;
            color:orange;
            border:1px solid orange;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li style="z-index: 1;"><img src="images/01.jpg"/></li>
        <li><img src="images/02.jpg"/></li>
        <li><img src="images/03.jpg"/></li>
        <li><img src="images/04.jpg"/></li>
        <li><img src="images/05.jpg"/></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
<script src="../jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        var zIndex=0;
        $("ol li").mouseenter(function(){
            ++zIndex;
            $(this).addClass("active")
                    .siblings("li").removeClass("active");

        $(".wrap>ul>li").eq($(this).index()) .css({
            "z-index": zIndex,
            "left": 650
        })
                .animate({
                        "left":0
                },1000)

        });
    });
</script>
</html>

zoekitty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三层级伦播图

ul,li,ol{ margin:0; padding:0; text-decoration: none; list-style: none; } .wrap{ width:650px; height:250px;
复制链接

扫一扫