同时展示多张图片的无缝轮播

矫情吗；* 2023-06-12 04:29 41阅读 0赞

#  #

## 前言 ##

这段时间在做练习的时候遇到了这个要展示多个轮播图的需求，现在大部分网页的轮播图每次都是展示一个的，就算是淘宝、天猫这样的大网站。一开始在做这个轮播图的时候在决定跳转的时刻同时防止用户短时间内频繁翻页这个地方卡了一会，最后终于做出来的时候决定将实现原理分享一下。

首先看一下要实现的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]  
如图，一次性展示5张图片，向左或向右翻页时图片的展示顺序是固定的。

本文将使用 JQ 实现这个效果，如果用原生js的话道理也是一样的，只是会麻烦一点，有兴趣的读者可以自己尝试一下。

## 实现原理 ##

### 图片位置 ###

其实同时展示多张图片的轮播图和一次展示一张 图片的轮播图原理类似，也是展示在边缘图片还要继续走之前先将图片移动到另外一边  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 1]  
上图是展示单张页面的原理图，当展示图片为最右边的 ‘1’ 同时还要向右翻的时候，整个矩形要移动位置，将最左边的‘1’定位到展示窗口，然后才执行向右翻的操作；  
这里为了实现无缝轮播一定要在‘头’之前衔接‘尾’，要在‘尾’之后衔接头；

而要实现多张图片的无缝轮播道理也是相似的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 2]  
比如说，要实现同时展示五张图片的无缝轮播，就以五张图片为整体，将3个整体合并起来；  
当展示窗口移动到最左边的时候还要向左翻页，那在翻页前先将‘矩形’的中间整体定位到展示窗口，然后再执行向左翻的操作；向右翻操作同理；

### 防止用户短时间内进行多次翻页 ###

我实现这个功能的方法是给定一个用于判定是否可以翻页的变量，当变量为 true 时可以执行翻页，当变量为 false 时禁止翻页，当翻页这个动作结束时再将该变量设置为 true。

## 具体代码 ##

### html ###

### js ###

$(function () { 
                var carousel = $('.carousel')
                    ,clickable = true
                    ,timer
                    
    			// 自动轮播函数
                function autoRun() { 
                    timer = setInterval(function () { 
                        if( parseInt(carousel.css('left')) <= -1860 ){ 
                            carousel.css('left', '-930px')
                        }
                        animate(-1)
                    }, 3000)
                }
                // 刚打开页面时执行
                autoRun()
    
                $('.leftArrow').click(function () { 
                	// 防止用户疯狂点击翻页
                    if(clickable){ 
                        clickable = false
                        // 当展示的5张图片为最左边的五张图片同时还要向左翻页时，重置位置
                        if( parseInt(carousel.css('left')) <= -1860 ){ 
                            carousel.css('left', '-930px')
                        }
                        animate(-1)
                    }
                });
                
                $('.rightArrow').click(function () { 
                	// 防止用户疯狂点击翻页
                    if(clickable){ 
                        clickable = false
                        // 当展示的是最右边5张图片还要向右 翻页时，重置位置
                        if( parseInt(carousel.css('left')) >= 0 ){ 
                            carousel.css('left', '-930px')
                        }
                        animate(1)
                    }
                });
    
                // 切换页面函数
                function animate(direction) {  // 这里传入的参数表示翻页的方向
                	// 这里的 186px 是一张图片的宽度，因为用户手动点击翻页是随时发生的
                   	// 因此必须在手动翻页时进行位置的调整
                    var adjustment = parseInt(carousel.css('left')) % 186
                    
                    if( direction === -1 ){  // 向左翻页
                        carousel.stop().animate({ left: '+='+ direction*(186 + adjustment) +'px'}, 1500)
                    } else{  // 向右翻页
                        carousel.stop().animate({ left: '+='+ direction*(186 - adjustment) +'px'}, 1500)
                    }
                    
                    // 翻页的动画用时 1.5s， 为了保证‘安全’我将再次点击许可设置在了 2s 后
                    // 虽然你可能会认为这个有点太简单暴力了。。我想这个地方用 Promise 来实现可能会优雅一点
                    setTimeout(function () { 
                        clickable = true
                    }, 2000)
                }
    
                // 鼠标移入时清除自动轮播的定时器
                $('.pic').mouseenter(function () { 
                    clearInterval(timer)
                    timer = null
                })
                // 鼠标移出时开始自动轮播的定时器
                $('.pic').mouseleave(function () { 
                    autoRun()
                })
      	})

--------------------

当然这个功能的实现方法不唯一，如果你有更好的解决办法，欢迎私信或在评论区评论~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]: /images/20230531/eb3f0a29b0f448ffbc166a6d6b0860c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 1]: /images/20230531/22eb9dc48cb04b56b9a3232340022a85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 2]: /images/20230531/b75d0d83291844198371ba0813215a95.png