Document

## 一、无缝连续滚动特效 ### 1、无缝连续滚动原理比如有6张图片，依次为0~5 那么将相同的0~5图片拼接在后面进行滚动 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79f247e485f9482bb10e88b82cac7b0d~tplv-k3u1fbpfcp-zoom-1.image) 当第二组图片的第0个图片移动到滚动区域的左侧时（即第一组图片移动完）时，立即将图片从头开始继续移动即可 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/474fd13006c24d00a3f58a52eacffb05~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6718f7c771e74c518e538ec4a4c2b4ac~tplv-k3u1fbpfcp-zoom-1.image) ### 2、无缝连续滚动代码实现 ``` Document

``` ## 二、跑马灯轮播图特效 ### 2-1、实现原理与注意事项假设现要轮播5张图片，实现点击右按钮来播放下一张图片，点击左按钮来播放上一张图片。 #### 2-1-1、布局轮播图，实现点击右按钮切换下一张图片 ``` Document

``` - 需要注意的是，每张图以浮动的方式排列，ul宽度要足够大才能将li排列开来 - 我们可为ul的left属性添加过渡效果，使得移动时更加丝滑此时，我们会发现当我们不断点击时，轮播到第五张图后再次点击右按钮，图片变成了空白，那么我们如何实现轮播到最后一张图后紧接着从第一张开始轮播呢？ #### 2-1-2、实现最后一张图片与第一张图片衔接轮播效果实现原理： - 将第一张图克隆一份追加到最后一张图后面，这样轮播到最后一张图后再次点击看到的便是第一张图 - 为了再次点击按钮时变成第二张图，那么我们可以在移动到克隆图片后快速将ul元素的left置为0即可 - 这里我们给ul添加了过渡动画，动画时长为0.5s，所以我们要等动画时长过后再快速将ul的left置为0 - 在将ul的left快速置为0时是不需要肉眼察觉到的，所以此处要将过渡效果去除 ``` // 得到按钮和ul，ul整体进行运动 var leftbtn = document.getElementById('leftbtn'); var rightbtn = document.getElementById('rightbtn'); var list = document.getElementById('list'); // 克隆第一张图片，追加到后面 var cloneli = list.firstElementChild.cloneNode(true); list.appendChild(cloneli); var idx = 0; // 表示此时处于第几张图 rightbtn.onclick = function () { // 为了防止重置ul时将transition置为了'none'，这里还原一下 list.style.transition = 'left .5s ease 0s'; idx++; // 点击一次图片序号+1 if (idx > 4) { // 在动画时长过后将ul快速重置回去 setTimeout(function () { list.style.transition = 'none'; list.style.left = 0; idx = 0; }, 500); } list.style.left = -idx * 650 + 'px'; // 表示向左移动的位置，每张图宽度为650 } ``` #### 2-1-3、优化：添加节流锁防止快速点击轮播图播放异常由于此处轮播图播放的过渡动画为500毫秒，所以我们可以设置一个节流锁 ``` var idx = 0; // 表示此时处于第几张图 var lock = true; rightbtn.onclick = function () { if (!lock) { return } lock = false; // 锁住 // 为了防止重置ul时将transition置为了'none'，这里还原一下 list.style.transition = 'left .5s ease 0s'; idx++; // 点击一次图片序号+1 if (idx > 4) { // 在动画时长过后将ul快速重置回去 setTimeout(function () { list.style.transition = 'none'; list.style.left = 0; idx = 0; }, 500); } list.style.left = -idx * 650 + 'px'; // 表示向左移动的位置，每张图宽度为650 setTimeout(function () { lock = true; }, 500); } ``` #### 2-1-4、实现点击左按钮，切换上一张轮播图 - 如果已经是第一张轮播图了，则点击左按钮期望切换到最后一张图，那么就需要瞬间移动到拼接到最后面的克隆图片上（去除过渡效果）；然后添加上过渡效果，将轮播图移动到真正的最后一张图片上 - 如果不是第一张轮播图，则idx -- 正常移动即可 ``` leftbtn.onclick = function () { if (!lock) return; lock = false; // 判断是不是第0张，如果是，就要瞬间用假的替换真的 if (idx == 0) { // 取消掉过渡，因为要的是瞬间移动，不是“咕噜”过去 list.style.transition = 'none'; // 直接瞬间移动到最后的假图片上 list.style.left = -5 * 650 + 'px'; // 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上 setTimeout(function () { // 加过渡 list.style.transition = 'left .5s ease 0s'; // idx改为真正的最后一张 idx = 4; list.style.left = -idx * 650 + 'px'; }, 0); } else { idx--; list.style.left = -idx * 650 + 'px'; } // 函数节流 setTimeout(function () { lock = true; }, 500); } ``` 需要注意的是，如果已经是第一张图，那么点击左按钮时要取消过渡然后瞬间移动到克隆图片上，然后再加上过渡移动到真正的最后一张图片上，这里恢复过渡时利用了setTimeout是为了让取消过渡的瞬移起效果，不然瞬间移动还是会有过渡效果。 ### 2-2、完整代码 ``` Document

``` 总结：跑马灯轮播图的要点是，所有的图片以浮动的方式排成一排，父元素改变left值进行移动；此外为了能够起到轮播的效果，要克隆第一张图片拼接到最后： - 在移动到最后一张图片再次向后移动时，先移动到克隆图片上，然后再瞬间让left变为0再进行移动（如果有过渡动画需要注意需要设置延时器，在动画效果结束后再重置回去） - 在移动到第一张图片再次先前移动时，需要先瞬移到克隆图片上，然后再移动到真正的最后一张图片上 ## 三、呼吸灯轮播图特效 ### 3-1、实现原理与跑马灯轮播图特效不同的是，呼吸灯特效需要各个轮播图堆叠在一起，以上一张“淡出”下一张“淡入”的方式来实现效果，也不需要克隆第一张图拼接到最后。 - 首先使用定位的方式，让各个轮播图堆叠展示，将第一张轮播图的opacity置为1，其余轮播图置为0，为了实现淡出淡入效果，可为ul添加opacity的过渡动画 - 当点击左/右按钮时，让当前轮播图的opacity变为0，上一张/下一张轮播图的opacity变为1即可 - 同样需要节流锁的使用，比如过渡动画时间为1s则锁打开的时长也设置为1s ### 3-2、代码实现 ``` Document

```