无缝滚动图

最新推荐文章于 2024-07-08 18:51:22 发布

一念永恒@

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量42

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_48435896/article/details/132619063

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* body {
        /* background-color: #000; */
    /* }  */

    .sec {
        width: 1190px;
        height: 350px;
        margin: 150px auto;
        border: 1px solid #ccc;
        position: relative;
        overflow: hidden;
        border-radius: 15px;
    }

    .sec .top-img {
        width: 2400px;
        height: 350px;
        /* background-color: gold; */
        list-style: none;
        position: absolute;

    }

    .sec .top-img li {
        width: 300px;
        height: 350px;
        float: left;
        /* padding-right: 5px; */

    }

    .sec .top-img li img {
        width: 290px;
        height: 350px;
        margin: 0;
    }

    /* .sec .btns a {
        display: block;
        position: absolute;
        top: 50%;
        width: 50px;
        height: 50px;
        font-family: serif;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        margin-top: -25px;
        border-radius: 50%;
        text-decoration: none;
        color: #fff;
        opacity: 0.3;
        background-color: rgba(0, 0, 0, .3);
    }

    .sec .btns a.btnRight {
        right: 0;
    }

    .sec .btns a:hover {
        text-shadow: 0 0 20px #fff;
        opacity: 0.8;
    } */

    .sec .down-btn {
        list-style: none;
        width: 140px;
        height: 18px;
        position: absolute;
        bottom: 5px;
        left: 50%;
        font-family: serif;
        font-size: 13px;
        margin-left: -75px;
    }

    .sec .down-btn li {
        float: left;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        margin: 0 5px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
        color: #fff;
        background-color: rgba(0, 0, 0, .3)
    }

    .sec .down-btn li:hover {
        background-color: rgba(0, 0, 0, .7)
    }

    .sec .down-btn .cur {
        background-color: rgba(0, 0, 0, .7)
    }
</style>

<body>
    <div class="sec" id="sec">
        <ul class="top-img" id="top-img">
            <li><img src="https://c-ssl.dtstatic.com/uploads/item/202002/05/20200205192210_tKHiT.thumb.1000_0.jpeg"
                    alt=""></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F26%2F20200326120507_kshfn.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696085675&t=dbc41bf2e38939f8f5438768cc2f2103"
                    alt=""></li>
            <li><img src="https://c-ssl.dtstatic.com/uploads/item/202005/07/20200507162517_xmyav.thumb.1000_0.jpg"
                    alt=""></li>
            <li><img src="https://img2.baidu.com/it/u=3761895677,3817896943&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=488"
                    alt=""></li>
            <li><img src="https://c-ssl.dtstatic.com/uploads/item/202002/05/20200205192210_tKHiT.thumb.1000_0.jpeg"
                    alt=""></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F26%2F20200326120507_kshfn.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696085675&t=dbc41bf2e38939f8f5438768cc2f2103"
                    alt=""></li>
            <li><img src="https://c-ssl.dtstatic.com/uploads/item/202005/07/20200507162517_xmyav.thumb.1000_0.jpg"
                    alt=""></li>
            <li><img src="https://img2.baidu.com/it/u=3761895677,3817896943&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=488"
                    alt=""></li>
            <li><img src="https://c-ssl.dtstatic.com/uploads/item/202002/05/20200205192210_tKHiT.thumb.1000_0.jpeg"
                    alt=""></li>
        </ul>
        <!-- <div class="btns" id="btns">
            <a href="javascript:;" class="btnLeft" id="btnLeft">&lt;</a>
            <a href="javascript:;" class="btnRight" id="btnRight">&gt;</a>
        </div>-->
        <ol class="down-btn" id="down-btn">
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ol>
    </div>
</body>


<script>
    var idx = 0;
    var $length = $("#top-img li").length;
    console.log($length, "length")
    $("#top-img li").eq(0).clone().appendTo("#top-img");
    // $("#btnRight").click(move)

    function move() {
        var slideWidth = -1 * 300 * idx;
        console.log(slideWidth, "slideWidth")
        if ($("#top-img").is(":animated")) return
        idx++;
        $("#top-img").animate({
            // "left": -idx * 1200
            "left": slideWidth + 'px'
        }, 800, function () {
            if (idx > $length / 2) {
                idx = 0
                $("#top-img").css("left", 0)
            }
            // $("#down-btn li").eq(idx).addClass("cur").siblings().removeClass("cur");
        })
    }
    // $("#btnLeft").click(function () {
    //     if ($("#top-img").is(":animated")) return
    //     idx--;
    //     if (idx < 0) {
    //         idx = $length - 1;
    //         $("#top-img").css("left", -$length * 600);
    //     }
    //     $("#top-img").animate({
    //         "left": -idx * 600
    //     }, 800, function () {
    //         $("#down-btn li").eq(idx).addClass("cur").siblings().removeClass("cur")
    //     })
    // })
    // $("#down-btn li").mouseenter(function () {
    //     index = $(this).index();
    //     $("#top-img").stop(true).animate({
    //         "left": -index * 600
    //     }, 800);
    //     $("#down-btn li").eq(index).addClass("cur").siblings().removeClass("cur")
    // })
    var timer = setInterval(move, 2000);
    $("#sec").mouseenter(function () {
        clearInterval(timer)
    })
    $("#sec").mouseleave(function () {
        clearInterval(timer);
        timer = setInterval(move, 2000);
    })
</script>


</html>

一念永恒@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com
复制链接

扫一扫