轮播图的两种实现方法

╰+哭是因爲堅強的太久メ 2023-07-11 12:49 7阅读 0赞

方法一：

//基本思想：假设有3张图片500X313，将图片横向排成一列，将第一张图片拼接在最后一张后面（放置最后一张图片左移时出现空白）
    //图片所在的ul指定宽度为(3+1)X500 = 2000
    
    //首先通过定时器实现图片向左移动
     var imgs = document.getElementById("imglist");
        var left = 0;
        var iconlis = document.getElementById("iconlist");
        var lis = iconlis.getElementsByTagName("li");
        function move() { 
            var selIndex = Math.floor(Math.abs(left / 500));
            changeIndex(selIndex);
            left = left - 10;
            var time = (left % 500) == 0 ? 2000 : 10;
    
            imgs.style.left = left + 'px';
            if (left == -1500) { 
                left = 0;
                //clearTimeout(id);
            }
    
            var id = setTimeout(move, time);
        }
        move();
    
        //每次图片变动时更新小图标
        function changeIndex(selIndex) { 
            console.log(selIndex);
            for (let i = 0; i < lis.length; i++) { 
    
                if (i == selIndex) { 
                    lis[i].style.background = "#0000ff";
                }else{ 
                    lis[i].style.background = "";
    
                }
            }
        }

方法二：

待更新（完善）  
20200330另一种轮播方式：通过transition:transform .4 ease-in-out的方式每次播放一个图片长度。

分析：加入选定3张图片播放，就需要放四张图片 1，2，3，1  
当播放到最后一个图片（第一张图片时），**去掉动画效果，直接跳转到前面的第一张**（this.now为0\*slideWidth）,这样，下一次setInterval时就会从第一张图片开始播放

–20200331  
完整代码如下：

<!DOCTYPE html>
    <html>
    
    <head>
        <title>轮播</title>
        <style>
            .container { 
                width: 100%;
                overflow: hidden;
                position: relative;
            }
    
            .container .scene { 
                display: flex;
                /*transition: transform .4s ease-in-out;*/
            }
    
            .item { 
                width: 100%;
                /*此处的宽度100%表示图片会拉伸成父元素的宽度*/
                flex-shrink: 0;
            }
    
            .item .up { 
                display: flex;
                width: 100%;
            }
    
            img { 
                width: 100%;
                height: 370px;
            }
    
            .step { 
                position: absolute;
                /* margin-top: 20px; margin-left: 20px; */
                left: 0;
                right: 0;
                bottom: 8px;
                display: flex;
                justify-content: center;
                z-index: 2;
    
            }
    
            .step-dot .dot-item { 
    
                display: inline-block;
                width: 30px;
                height: 14px;
                border-radius: 14px;
                background: #fff;
                margin-right: 15px;
            }
            .step-dot .active{ 
                width:40px;
                background: red;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="scene">
                <div class="item">
                    <div class="up">
                        <img src="images/4.jpg">
                    </div>
                </div>
                <div class="item">
                    <div class="up">
                        <img src="images/5.jpg">
                    </div>
                </div>
                <div class="item">
                    <div class="up">
                        <img src="images/6.jpg">
                    </div>
                </div>
                <div class="item">
                    <div class="up">
                        <img src="images/4.jpg">
                    </div>
                </div>
    
    
            </div>
            <div class="step">
                <div class="step-dot">
                    <div class="dot-item"></div>
                    <div class="dot-item"></div>
                    <div class="dot-item"></div>
                </div>
            </div>
        </div>
    
    
    
    </body>
    <script>
        var scene = document.querySelector('.scene');
        this.slideWidth = document.body.clientWidth;
        this.now = 0;
        this.dot = 0;
        this.moveX = 0;
        this.startX = 0;
        this.distanceX = 0;
        this.startTranslate = true;//刚进入轮播的状态(只使用一次)
        this.length = 3;//imgs.length计算出的长度
        var dots = document.querySelectorAll('.dot-item');
    
        function moveImg(translateX){ 
            scene.style.transform = `translateX(-${ translateX}px)`
            scene.style.webkitTransform = `translateX(-${ translateX}px)`
        }
    
        function changeDot(dot){ 
            for(let i = 0; i < this.length; i++){ 
                dots[i].classList.remove('active')
            }
            dots[dot].classList.add('active')
        }
    
        for(let i = 0; i < dots.length; i++){ 
            dots[i].onclick = ()=>{ 
                console.log(`this.now:${ this.now}`);
                //首先点击停止动画
                if(this.timer) clearInterval(this.timer)
                //将this.now 变为点击的i,同时改变圆点和img的下标
                this.now = i;
                this.dot = i;
                changeDot(this.dot);
                //
                scene.style.transition = 'all 0.3s'
                moveImg(this.now * this.slideWidth);
                //执行完点击之后继续自动播放
                auto(3000);
            }
        }
    
        function transitionEnd(dom,callback){ 
            dom.addEventListener('transitionEnd',function(){ 
                callback && callback();
            })
            dom.addEventListener('webkitTransitionEnd', function () { 
    			callback && callback();
    		});
        }
    
        function removeTransition() { 
            if (!scene) return null;
            scene.style.transition = "none";
            scene.style.webkitTransition = "none";
        }
        function auto(ms) { 
            //刚进来的时候第一个小圆点是红色的，
            if(this.startTranslate){ 
                dots[0].classList.add('active');
                this.startTranslate = false;
                this.now++;
            }
            if (!this.timer) { clearInterval(this.timer)}
            this.timer = setInterval(() => { 
                if (this.now > this.length) { 
                    this.now = 1;
                }
                scene.style.transition = 'all 0.3s'
                console.log(`setInterval:${ this.now}`);
    
                dot = this.now === this.length?0:this.now;
                changeDot(dot);
                moveImg(this.now * this.slideWidth);
                this.now++;
            }, ms)
    
            //轮播到最后一张拼接的第一张图片时清除动画，并将图片下标变为第二张（index = 1）
            transitionEnd(scene,()=>{ 
                if (this.now > this.length) { 
                    this.now = 0;
                    this.removeTransition();
                    moveImg(this.now * this.slideWidth)
                    this.now = 1;
        
                }
            })
        }
    
        auto(3000);
    
        //手指滑动部分效果实现
        touchStart = (e)=>{ 
            if(this.timer){ clearInterval(this.timer)}
            this.startX = e.touches[0].clientX;
            // console.log(`startX:${this.startX}`);
    
        }
    
        touchMove = (e)=>{ 
            this.moveX = e.touches[0].clientX;
            this.distanceX = this.moveX - this.startX;
            //下面的操作使轮播看上去比较连贯
            if(this.now == 0&&this.distanceX > 0){ //第一张图片向右滑动
                this.now = this.length;
            }else if(this.now == this.length&&this.distanceX < 0){ //最后一张图片向左滑动
                this.now = 0;
            }
            this.removeTransition();
            scene.style.transform = `translateX(${ -this.now*this.slideWidth+this.distanceX}px)`
        }
    
        touchEnd = (e)=>{ 
            //如果移动的距离小于图片的1/2，则没有效果， 否则滑动一个图片的距离
            if(Math.abs(this.distanceX) > this.slideWidth/2){ 
                if(this.distanceX > 0){ 
                    this.now--;
                }else{ 
                    this.now++;
                }
            }
            //小圆点的下标
            let n = this.now === 0?this.length:this.now;
            n = this.now === this.length?0:this.now;
            console.log(`this.now after:${ n}`);
            //高亮小圆点
            this.changeDot(n);
            //图片动画
            scene.style.transition = 'all 0.3s';
            scene.style.transform = `translateX(${ -this.now*this.slideWidth}px)`
            //结束之后自动播放
            auto(3000);
        }
    
        scene.addEventListener('touchstart',this.touchStart,false);
        scene.addEventListener('touchmove',this.touchMove,false);
        scene.addEventListener('touchend',this.touchEnd,false);
    
    
    
    </script>
    
    </html>
    ```javascript
    在这里插入代码片