js原生轮播图 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .swiper {
            width: 800px;
            height: 500px;
            position: relative;
            overflow: hidden;
            background-color: bisque;
        }

        .swiper-box {
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            height: 500px;
        }

        .swiper-box .swiper-item {
            width: 800px;
            height: 500px;
            background-color: aqua;
            float: left;
        }

        .swiper-box .swiper-item img {
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div>
        <div class="swiper">
            <div class="swiper-box" style="left: -800px;">
                <div class="swiper-item">
                    6
                    <!-- <img src="./index_active.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    1
                    <!-- <img src="./index_gray.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    2
                    <!-- <img src="./my_active.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    3
                    <!-- <img src="./my_gray.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    4
                    <!-- <img src="./Tablet.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    5
                    <!-- <img src="./shouxie.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    6
                    <!-- <img src="./index_active.png" alt=""> -->
                </div>
                <div class="swiper-item">
                    1
                    <!-- <img src="./index_gray.png" alt=""> -->
                </div>
            </div>
        </div>
        <div>
            <button onclick="prev()">左</button>
            <button onclick="next()">右</button>
        </div>
    </div>

</body>

</html>
<script>
    var wrap = $('.swiper-box')[0]
    let ok = $('.swiper-item').length
    let domArr = $('.swiper-item')
    let total = 0
    for (let i = 0; i < ok; i++) {
        let aa = $($('.swiper-item')[i]).width()
        total += aa
        console.log('aa', aa);
    }
    console.log('ok', ok);
    $('.swiper-box').css({ width: total + 'px' })

    function prev() {
        console.log('左', wrap.style.left);
        var newLeft
        if (wrap.style.left === '-800px') {
            newLeft = -4800
        } else {
            newLeft = parseInt(wrap.style.left) + 800
        }
        $(wrap).animate({left: newLeft + 'px'})
    }
    function next() {
        console.log('右', wrap.style.left);
        var newLeft
        if (wrap.style.left === '-4800px') {
            newLeft = -800
        } else {
            newLeft = parseInt(wrap.style.left) - 800
        }
        $(wrap).animate({left: newLeft + 'px'},1000)
    }

    var timer = null
    function autoPlay() {
        timer = setInterval(() => {
            next()
        }, 3000);
    }
    autoPlay()
    $('.swiper').mouseenter(function () {
        clearInterval(timer)
    })
    $('.swiper').mouseleave(function () {
        autoPlay()
    })

</script>

　　

posted @ 2022-11-07 20:35  小寒爱吃西红柿  阅读(30)  评论(0)    收藏  举报