jQuery无缝轮播图

 JQuery代码

function RotationMap(content, btn_r, btn_l, page, width, btn) {
    var content = $("." + content)
    var btn = $("." + btn)
    var index = 1, temp = index
    function img_change(target, index, time) {
        target.css({
            transform: "translateX(" + -width * index + "px)",
            transition: time + "s"
        });
    }
    function autoplay() {
        index++;
        index = Math.abs(index + page) % page;
        if (index == page - 1) {
            index = 0;
            img_change(content, index, 0);
            setTimeout(autoplay, 1);
        }
        else if (index == 0) {
            index = page - 1;
            img_change(content, index, 0);
            index -= 2;
            setTimeout(autoplay, 1);
        }
        else {
            img_change(content, index, 0.3);
        }
        btn.eq(temp - 1).removeClass("selected");
        btn.eq(index - 1).addClass("selected");
        temp = index;
    }
    var btn_r = $("." + btn_r)
    var btn_l = $("." + btn_l)
    var time = setInterval(autoplay, 2000);
    $(content).add(btn_l).add(btn_r).add(btn).hover(function () {
        time = clearInterval(time);
    }, function () {
        if (!time) {
            time = setInterval(autoplay, 2000);
        }
    })
    btn_r.click(autoplay);
    btn_l.click(function () {
        index -= 2;
        autoplay();
    })
    btn.click(function () {
        index = $(this).index();
        autoplay();
    })
}

RotationMap("content", "btn_r", "btn_l", $(".content").children().length, $(".content").children().width(), "btn")
//content为img外盒子 btn_r,btn_l为两侧按钮 page为img个数 width为img大小 btn为外部切换按钮(可不用)

 HTML代码

<div class="container">
    <div class="btn fl selected">...</div>
    <div class="btn fl">...</div>
    <div class="btn fl">...</div>
    <div class="wrapper">
        <div class="btn_r">></div>
        <div class="btn_l"><</div>
        <div class="content">
            <img src="../img/build.jpg" alt="" class="fl">    //与最后一张相同
            <img src="../img/Iceland.jpg" alt="" class="fl">    //第一张
            <img src="../img/huang.jpg" alt="" class="fl">    //第二张
            <img src="../img/build.jpg" alt="" class="fl">    //第三张
            <img src="../img/Iceland.jpg" alt="" class="fl">    //与第一张相同
        </div>
    </div>
</div>

 CSS代码

* {
    padding: 0;
    margin: 0;
    user-select: none;
}

.fl {
    float: left;
}

.container {
    width: 600px;
    height: 800px;
    box-sizing: border-box;
    padding: 50px;
    margin: 0 auto;
}

.wrapper {
    width: 500px;
    height: 382px;
    margin: 100px auto;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}

.btn{
    user-select: none;
    width: 33%;
    height: 40px;
    padding: 5px 0;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    color: #000;
}

.btn:hover{
    cursor: pointer;
}

.selected{
    color: #fff;
    background: linear-gradient(orange, red);
}

.content {
    width: 2500px;
    height: 382px;
    transform: translateX(-500px);
}

.content>img {
    width: 500px;
}

.btn_l,
.btn_r {
    font-size: 20px;
    text-align: center;
    width: 70px;
    height: 100%;
    line-height: 382px;
    position: absolute;
    z-index: 1;
}

.btn_l {
    left: 0px;
    color: white;
}

.btn_r {
    right: 0px;
    color: white;
}

.btn_l:hover {
    cursor: pointer;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.7));
}

.btn_r:hover {
    cursor: pointer;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.7));
}