简单轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .iim{
            position: absolute;
            list-style: none;
            top: 0px;
            left: 0px;
            {#display: none;#}
        }
        .out{
            position: relative;
            top: 100px;
            left: 450px;
            width: 590px;
        }
        .xia{
            position: absolute;
            top: 420px;
            left: 170px;
            height: 20px;
            width: 250px;
        }
        .xia li{
            background: aliceblue;
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin-left: 4px;
        }
        .fangkuai{
            color: beige;
            font-size: 30px;
            position: absolute;
            top: 200px;
            opacity: 0.7;
            background: darkgray;
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            display: none;

        }
        .left{
            left: 0;
        }
        .right{
            right: 0px;
        }
        .xia .coo{
            background: red;
        }
        .out:hover .fangkuai{
            display: block;

        }
    </style>
</head>
<body>
    <div class="out">
            <ul class="img">
                <li class="iim">
                    <a><img src="https://m.360buyimg.com/babel/jfs/t17320/174/2067264907/100831/453dd451/5ae442fdN7f678991.jpg"></a>
                </li>
                <li class="iim">
                    <a><img src="https://img1.360buyimg.com/pop/jfs/t17557/227/1912529837/199083/60df45d9/5add87d9Nb54b25e4.jpg"></a>
                </li>
                <li class="iim">
                    <a><img src="https://img1.360buyimg.com/pop/jfs/t17614/203/1019745379/186817/a330f322/5ab8a6c1N5efa5944.jpg"></a>
                </li>
                <li class="iim">
                    <a><img src="https://m.360buyimg.com/babel/jfs/t19798/280/54261119/54820/2324cbc/5ae2d739N2cf3fc4e.jpg"></a>
                </li>
                <li class="iim">
                    <a><img src="https://img1.360buyimg.com/pop/jfs/t19543/147/1339756783/151455/59295be9/5ac9cefaN93744aa1.jpg"></a>
                </li>
                <li class="iim">
                    <a><img src="https://m.360buyimg.com/babel/jfs/t19390/224/2052806888/99084/3d521b17/5ae3de33Nc5be5a4c.jpg"></a>
                </li>
            </ul>
            <ul class="xia">
            </ul>
            <div class="fangkuai left">
                <
            </div>
            <div class="fangkuai right">
             >
            </div>
    </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var x=0;
    var imgNum = $(".img li").length;
    for (var i=0; i<imgNum; i++){
        $(".xia").append("<li></li>")
    }
    $(".xia li").eq(0).addClass("coo")

    $(".xia li").mouseover(function () {
        x = $(this).index();
        $(this).addClass("coo").siblings().removeClass('coo');
        $(".img li").eq(x).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    })
    var c=setInterval(rig,2000);
     x=0;
    function rig() {
        if (x==imgNum-1) {x=-1};
        x++;
        $(".xia li").eq(x).addClass("coo").siblings().removeClass('coo');
        $(".img li").eq(x).stop().fadeIn(400).siblings().stop().fadeOut(400);
        
    }
    function lef() {
        if (x==-1) {x=imgNum-1};
        x--;
        $(".xia li").eq(x).addClass("coo").siblings().removeClass('coo');
        $(".img li").eq(x).stop().fadeIn(400).siblings().stop().fadeOut(400);

    }

    $(".out").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(rig,2000)

    });
    $(".right").click(rig);
    $(".left").click(lef);

</script>
</body>
</html>
猜你喜欢
