jQuery实现无缝轮播

自己写的一个轮播demo，还有一些BUG，比如快速点上一张下一张会出现乱滚动

HTML部分

    
    
    
    


    
苹果风格轮播
    

        

            

                
                
                
                
            
        
        

            

                1
                2
                3
                4
            
        
        
<
        
>
    

CSS部分

* {
    margin: 0;
    padding: 0;
}
h1 {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 60px;
    font-weight: normal;
}
body {
    background-color: rgb(242, 242, 242);
    text-align: center;
}
.wrapper {
    background-color: #fff;
    width: 800px;
    height: 450px;
    display: inline-block;
    border-radius: 4px;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .2);
    padding: 100px 260px 150px 260px;
    box-sizing: border-box;
    position: relative;
}
.images {
    width: 260px;
    height: 195px;
    text-align: center;
    overflow: hidden;

}
.images .slide {
    display: flex;
    transition: all .3s;
}
.btn {
    width: 100%;
    background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#FFFFFF), to(#ddd));
    box-shadow:0px 1px 2px 0px  #ccc inset;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 0;
    bottom: 0;

}
.btn .spans {
    border-left: 1px solid #ccc;
    border-right: 1px solid #fff;
    display: inline-block;
    padding-left: 5px;
}
.btn span {
    display: inline-block;
    margin-left:-5px;
    padding: 12px 20px;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    cursor: pointer;
    padding-right: 19px;
}
.left, .right {
    padding: 20px 14px;
    background-color: #eee;
    display: inline-block;
    font-family: '宋体';
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 170px;
    cursor: pointer;
}
.left {
    left: 30px;
}
.right {
    right: 30px;
}

JS部分

let $buttons = $('.btn > .spans > span')
    let $slide = $('.slide')
    let $images = $slide.find('img')
    let current = 0

    makeFakeSlides()
    $slide.css({transform: 'translateX(-260px)'})
    bindEvents()

    // 拷贝最后一张到前面，拷贝第一张到后面
    function makeFakeSlides() {
        let $fistCopy = $images.eq(0).clone(true)
        let $lastCopy = $images.eq($buttons.length - 1).clone(true)

        $slide.append($fistCopy)
        $slide.prepend($lastCopy)
    }
    function bindEvents() {
        $buttons.eq(0).on('click', function () {
            if (current === 3) { // 最后一张到第一张
                $slide.css({transform: 'translateX(-1300px)'})
                        .one('transitionend', function () {
                            $slide.hide().offset()
                            $slide.css({transform: 'translateX(-260px)'})
                                    .show()
                        })
            } else {
                $slide.css({transform: 'translateX(-260px)'})
            }
            current = 0
        })

        $buttons.eq(1).on('click', function () {
            $slide.css({transform: 'translateX(-520px)'})
            current = 1
        })
        $buttons.eq(2).on('click', function () {
            $slide.css({transform: 'translateX(-780px)'})
            current = 2
        })
        $buttons.eq(3).on('click', function () {
            if (current === 0) {  // 第一张到最后一张
                $slide.css({transform: 'translateX(0px)'})
                        .one('transitionend', function () {
                            $slide.hide().offset()
                            $slide.css({transform: 'translateX(-1040px)'})
                                    .show()
                        })
            } else {
                $slide.css({transform: 'translateX(-1040px)'})
            }
            current = 3
        })
    }

优化

let $buttons = $('.btn > .spans > span')
let $slide = $('.slide')
let $images = $slide.find('img')
let current = 0

makeFakeSlides()
$slide.css({transform: 'translateX(-260px)'})
bindEvents()
// 上一张
$('.left').on('click', function () {
    goToSlide(current + 1)
})

// 下一张
$('.right').on('click', function () {
        goToSlide(current - 1)
})
// 自动轮播 
let timer = setInterval(function () {
    goToSlide(current + 1)
}, 1000)
// 鼠标滑入停止
$('.wrapper').on('mouseenter', function () {
    clearInterval(timer)
})
// 鼠标滑出继续
$('.wrapper').on('mouseleave', function () {
    timer = setInterval(function () {
        goToSlide(current + 1)
    }, 1000)
})
// 拷贝最后一张到前面，拷贝第一张到后面
function makeFakeSlides() {
    let $fistCopy = $images.eq(0).clone(true)
    let $lastCopy = $images.eq($buttons.length - 1).clone(true)

    $slide.append($fistCopy)
    $slide.prepend($lastCopy)
}
function bindEvents() {
    $('.btn > .spans').on('click', 'span', function (e) {
        let $button = $(e.currentTarget)
        let index = $button.index()
        goToSlide(index)

    })
}
function goToSlide(index) {  // 点击按钮到达相应位置
    if (index > $buttons.length - 1) {
        index = 0
    } else if (index < 0) {
        index = $buttons.length - 1
    }
    if (current === $buttons.length - 1 && index === 0) {  // 最后一张到第一张
        $slide.css({transform: 'translateX(' + -($buttons.length + 1 ) * 260 + 'px)'})
                .one('transitionend', function () {
                    $slide.hide().offset()
                    $slide.css({transform: 'translateX(' + -(index + 1 ) * 260 + 'px)'})
                            .show()
                })
    } else if (current === 0 && index === $buttons.length - 1) {  // 第一张到最后一张
        $slide.css({transform: 'translateX(0px)'})
                .one('transitionend', function () {
                    $slide.hide().offset()
                    $slide.css({transform: 'translateX(' + -(index + 1 ) * 260 + 'px)'})
                            .show()
                })
    } else {    // 其他按钮
        $slide.css({transform: 'translateX(' + -(index + 1 ) * 260 + 'px)'})
    }
    current = index
}