<!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>

　　

原文地址：http://www.cnblogs.com/fanqieyuanzi/p/16867373.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性