雖然網上已經多如牛毛關於這個特效實現的介紹，但今天還是想自己擼一份加上自己的理解。

首先來看下什麼是無縫輪播什麼是非無縫輪播

這是某騰體育的首頁輪播圖，可以看到當到最後一張返回第一張輪播或者第一張到最後一張時會有一個回拉的動作

這種視覺使用者體驗比較不友好有種晃眼的感覺。

下面看看無縫輪播效果

可以看到無縫輪播當最後一張到第一張或是第一張到最後一張切換時是一種很平滑的效果，是一種較好的使用者體驗

下面就來看看用原生的JS是怎麼完成的

css:

a, ul, li {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.wrap {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.wrap .left {
    position: absolute;
    top: 142px;
    left: -18px;
}

.wrap .left img {
    width: 80px;
    height: 80px;
}

.wrap .right {
    position: absolute;
    top: 142px;
    right: -16px;
}

.wrap .right img {
    width: 80px;
    height: 80px;
}

.navs {
    width: 4200px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -600px;
    /*transition: all .3s;*/
}

.navs li {
    width: 600px;
    height: 100%;
    float: left;
}

.navs li img {
    width: 100%;
    height: 100%;
}

#bots {
    display: inline-block;
    width: 600px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}

#bots li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cccccc;
    position: relative;
    left: 220px;
    top: 10px;
    margin-left: 10px;
    float: left;
}

#bots .active {
    background: red;
}
 

dom： 

<div class="wrap" id="box">
    <ul id='navs' class="navs" style="left: -600px">
        <li><a href="javascript:;"><img src="image/banner5.png"/></a></li>
        <li><a href="javascript:;"><img src="image/banner1.png"/></a></li>
        <li><a href="javascript:;"><img src="image/banner2.png"/></a></li>
        <li><a href="javascript:;"><img src="image/banner3.png"/></a></li>
        <li><a href="javascript:;"><img src="image/banner4.png"/></a></li>
        <li><a href="javascript:;"><img src="image/banner5.png"/></a></li>
        <li><a href="javascript:;"><img src="image/banner1.png"/></a></li>
    </ul>
    <a id="pre" class="left"><img src="image/left1.png"/></a>
    <a id="nex" class="right"><img src="image/right1.png"/></a>
    <ul id="bots">
        <!--<li class="bot active"></li>-->
        <!--<li class="bot"></li>-->
        <!--<li class="bot"></li>-->
        <!--<li class="bot"></li>-->
        <!--<li class="bot"></li>-->
    </ul>
</div>
 

上面的佈局在第一張克隆一個最後一張的副本，在最後一張克隆一張第一張的副本

當我們切換到最後一張的時候點選下一張時移動到第一張副本的同時利用js設定css樣式迅速切換到真正的第一張這個過程是肉眼無法看到的來達到無縫的目的

 

下面是滑鼠每次點選就改變一點點位置，所以我們可以利用定時器來設計很小的時間不斷移動位置來實現過渡切換的效果。

js：

<script>
    window.onload = function () {
        var pre = document.getElementById('pre'); // 上一張
        var nex = document.getElementById('nex'); // 下一張
        var list = document.getElementById('navs'); // 輪播圖
        var bots = document.getElementById('bots'); // 小圓點
        var box = document.getElementById('box'); // 最外層容器用來判斷滑鼠移入移除停止自動輪播
        var index = 0; // 記錄當前小圓點下標
        var isanimate = true; // 是否自動播放
        var interval; // 自動播放定時器
        var disable = true; // 用來控制快速點選導致頁面錯亂
        //初始化小圓點
        for (let i = 0; i < list.children.length - 2; i++) {
            let li = document.createElement('li')
            bots.appendChild(li)
        }
        bots.children[0].className = 'active' // 預設第一個為初始圓點高亮
        // 上一張
        pre.onclick = function () {
            if(disable){
                disable = false // 這裡設定為false表示進入切換動畫未完成時就不能點選
                index--;  // 小圓點下標--
                changebots() //改變高亮
                animate(600) // 切換輪播圖動畫
            }

        }
        // 下一張
        nex.onclick = function () {
            if(disable){
                disable = false
                index++;
                changebots()
                animate(-600)
            }
        }

        // 改變圓點高亮
        function changebots() {
            if (index < 0) {  // 如果小於0圖片到最後一張高亮也對應到最後一個圓點
                index = 4
            }
            else if (index > 4) { // 如果大於於4圖片到第一張一張高亮也對應到第一個圓點
                index = 0
            }
            for (let i = 0; i < bots.children.length; i++) {
                bots.children[i].className = ''
            }
            bots.children[index].className = 'active'
        }

        // 圖片切換動畫
        function animate(offset) {
            let newLeft = parseInt(list.style.left) + offset;  // 下一張輪播圖應該位移到的位置
            let interval = 10;  // 圖片位移的時間
            let speed = (offset / 10) / 3 //每10ms移動的位置這裡是設定20px 這裡可以根據自己需求改動
            // 自動輪播小圓點自動切換
            if (isanimate) {
                index++;
                changebots(index)
            }

            // 利用定時器遞迴的模擬動畫效果切換圖片
            function change() {
                if (parseInt(list.style.left) === -3600) {
                    list.style.left = -600 + 'px'
                    newLeft = -1200
                }
                if (parseInt(list.style.left) > 0) {
                    list.style.left = -3000 + 'px'
                    newLeft = -2400
                }
                this.timer = setTimeout(() => {
                    list.style.left = list.offsetLeft + speed + 'px'
                    if (parseInt(list.style.left) != newLeft) { // 判斷是否到了應該到的位移位置，到達就清除計時器停止遞迴
                        change()
                    } else {
                        clearTimeout(this.timer)
                        disable = true //動畫完成進行下一次點選
                        console.log(disable)
                        console.log(list.style.left)
                    }
                }, interval)
            }
            change()

        }

        // 小圓點切換
        bots.onclick = function (ev) {
            var ev = ev || window.event;
            let target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                for (let i = 0; i < bots.children.length; i++) {
                    if (bots.children[i] === target) {
                        index = i;
                        console.log(index)
                        break;
                    }
                }
                changebots() // 切換下標
                list.style.left = ((index + 1) * -600) + 'px' // 切換輪播圖
            }

        }
        // 自動輪播
        function autoplay() {
            interval = setInterval(() => {
                animate(-600)
            }, 2000)
        }

        // 滑鼠移入停止自動輪播
        box.onmouseover = function () {
            isanimate = false
            console.log('in')
            clearInterval(interval)
        }
        //滑鼠移出開始輪播
        box.onmouseleave = function () {
            isanimate = true
            autoplay()
            console.log('out')
        }
        autoplay()
    }
</script>
 

上面是原生JS去實現那麼怎麼用JQ實現呢,用JQ 來實現就簡單的多了

<script>
    $(function () {

        var index = 0; // 記錄當前小圓點下標
        var isanimate = true; // 是否自動播放
        var interval; // 自動播放定時器
        //初始化小圓點
        for (let i = 0; i < 5; i++) {
            let li = $('<li></li>')
            $('#bots').append(li)
        }
        $('#bots li').first().addClass('active')
        // 上一張
        $('#pre').click(function () {
            index--;
            if (index < 0) {
                $('#navs').css('left', -3600)
                index = 4
            }
            manimate(index)
            changebots(index)
        })
        //下一張
        $('#nex').click(function () {
            index++;
            if (index >5) {
                $('#navs').css('left', -600)
                index = 1
            }
            manimate(index)
            changebots(index)
        })
        //小圓點切換
        $('#bots').click(function (ev) {
            var ev = ev || window.event;
            let target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                for (let i = 0; i < 5; i++) {
                    if ($('#bots')[0].children[i] === target) {
                        index = i;
                        console.log(index)
                        break;
                    }
                }
            }
            $('#navs').css('left', (index + 1) * -600)
            changebots(index)
        })

        // 切換動畫效果
        function manimate(i) {
            i +=1;
            // console.log(i)
            $('#navs').stop().animate({left: -i * 600}, 500)
        }

        // 切換圓點
        function changebots(i) {
            if (i < 0) {
                i = 4
            } else if (i > 4) {
                i = 0
            }
            $('#bots li').eq(i).addClass('active').siblings().removeClass('active')

        }

        // 自動輪播
        function autoplay() {

            interval = setInterval(() => {
                index++;
                if (index >5) {
                    $('#navs').css('left', -600)
                    index = 1
                }
                changebots(index)
                manimate(index)
            }, 2000)
        }

        // 滑鼠移入停止自動輪播
        $('#box').mouseover(function () {
            console.log('in')
            clearInterval(interval)
        })
        //滑鼠移出開始輪播
        $('#box').mouseleave(function () {
            console.log('out')
            autoplay()
        })
        autoplay()

    })
</script>