HTML学习

最新推荐文章于 2022-08-22 23:23:39 发布

该账户已被系统禁用

最新推荐文章于 2022-08-22 23:23:39 发布

阅读量137

点赞数

分类专栏： python3

本文链接：https://blog.csdn.net/dance117/article/details/103174708

版权

python3 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShowPictures</title>
    <style>
        *{margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        .outer{
            margin: 50px auto;
            height: 470px;
            width: 590px;
            position: relative;
        }
        .imge li{
            position: absolute;
            top: 0;
            left: 0;
        }
        .number{
            position: absolute;
            bottom: 20px;
            text-align: center;
            width: 100%;
        }
        .number li{
            display: inline-block;
            height: 20px;
            width: 20px;
            background-color: cyan;
            color: oldlace;
            text-align:center;
            line-height: 20px;
        }
        .btn{
            position: absolute;
            height: 60px;
            width: 30px;
            background-color: cyan;
            color: oldlace;
            text-align: center;
            line-height: 60px;
            top: 50%;
            margin-top: -40px;
            display: none;
        }
        .left_btn{
            left: 0;
        }
        .right_btn{
            right: 0;
        }
        .outer:hover .btn{
            display: block;
        }
        .current{
            background-color: red!important;
        }
/*优先级 id=100 class=10 ele=1

    </style>
</head>
<body>
<div class="outer">
    <ul class="imge">
        <li><a><img src="https://img11.360buyimg.com/pop/s590x470_jfs/t1/26587/26/9798/97535/5c7f6a96E2f5e5d07/464e6792954e8f88.jpg.webp"></a></li>
         <li><a><img src="https://img11.360buyimg.com/pop/s590x470_jfs/t1/66750/15/8417/48443/5d638f58E4a8b02d5/8972c652a993b971.jpg.webp"></a></li>
         <li><a><img src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/77335/5/15465/122303/5dd226b3E70c35d87/2f34bcc41834e38a.jpg.webp"></a></li>
         <li><a><img src="https://imgcps.jd.com/ling/12538687/6Ieq6JCl56ul5Lmm/5q-P5ruhMjAw5YePMTAw/p-5bd8253082acdd181d02fa09/295f0998.jpg"></a></li>
    </ul>

    <ul class="number">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div class="left_btn btn"><</div>
    <div class="right_btn btn">></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>>
<script>
    $(".number li").mouseover(function () {
        $(this).addClass("current").siblings().removeClass("current");
        var index=$(this).index();
        i=index;

        $(".imge li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    })

    var time= setInterval(move,2000);
    var i = 0;
    function move() {
        i++;
        if (i==4){
            i=0;
        }
        $(".number li").eq(i).addClass("current").siblings().removeClass("current");

        $(".imge li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function  moveL(){
        if(i==0){
            i=4;
        }
        i--;
        $(".number li").eq(i).addClass("current").siblings().removeClass("current");

        $(".imge li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }

    $(".outer").hover(function () {
        clearInterval(time);
    },function () {
        time=setInterval(move,1500)

    })

    $(".right_btn").click(function () {
        move();

    })
    $(".left_btn").click(function () {
        moveL()
    })
</script>


</body>
</html>