無縫輪播圖

html:

<div class="container">   <!--  無縫輪播-->
    <div class="carousel-image" style="left: -500px;">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=339056085,2254279736&fm=27&gp=0.jpg" class="image">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1465757463,2243826297&fm=27&gp=0.jpg" class="image">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=836142732,2789906085&fm=27&gp=0.jpg" class="image">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=339056085,2254279736&fm=27&gp=0.jpg" class="image">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1465757463,2243826297&fm=27&gp=0.jpg" class="image">

    </div>
    <div style="position: absolute;top: 150px;width: 500px;display: flex;justify-content: space-between;color:white;">
        <span id="pre">pre</span>
        <span id="next">next</span>
    </div>
</div>

css:

.container{
    position: relative;
    width:500px;
    height: 330px;
    overflow: hidden;
}
.carousel-image{
    position: absolute;
    width:3000px;
}

js:

let pre = document.getElementById("pre");
let next = document.getElementById("next");
let carouselImage = document.getElementsByClassName("carousel-image");
console.log(carouselImage[0].style.left)   //注意了：.style.left只能獲取有內聯樣式的標籤的left，不然爲空。.offsetLeft才能夠獲取標籤的left
//向右滑動
next.onclick = function () {
    animate(-500);
}
pre.onclick = function () {
    animate(500);
}
//移動函數
function animate(offset){    //爲何第二次go()函數調用時，offset爲NaN
    var leftDistance = parseInt(carouselImage[0].style.left) + offset;
    var newoffset = offset;
    var speed = newoffset/20;   //注意：若是這行代碼放在go()函數裏面，go()第二次執行的時候newoffset爲NaN,致使定時器失效。應該是涉及到了做用域鏈的知識點。  每一步移動的距離  speed>0是向右
    //動畫函數
    function go(newoffset){
        currentLeft = carouselImage[0].style.left;   //當前圖片的位置
        if(speed > 0 && leftDistance > parseInt(currentLeft) || speed < 0 && leftDistance < parseInt(currentLeft)){
            carouselImage[0].style.left =  parseInt(currentLeft) + speed + "px";
            setTimeout(go,10);
        }else if(leftDistance < -1500){
            carouselImage[0].style.left = -500 + "px";
        }else if(leftDistance > -500){
            carouselImage[0].style.left = -1500 + "px";

        }
    }
    go(newoffset);
}

效果圖

微信公衆號：天字一等