思路

无缝衔接是障眼法，复制第一张图到末尾，使头尾图片相同
每次第一张向左切换时，先大幅位移到最后一张，再开启transition，就没有缝了
每次最后一张向右切换时，先大幅位移到第一张，再开启transition，就没有缝了
这个再开启要使用setTimeout，因为如果同步执行，大幅度的位移会出现在动效里，障眼法就失败了

html

 <div><button class="left">&lt</button><button class="right">&gt</button><ul class="imgList"><li class="item "><img src="1.jpg" alt=""></li><li class="item "><img src="2.jpg" alt=""></li><li class="item "><img src="3.jpg" alt=""></li><li class="item "><img src="4.jpg" alt=""></li></ul></div>

script

      const left = document.querySelector('.left')const right = document.querySelector('.right')const imgList = document.querySelector('.imgList')// 克隆第一张图片，加在图片列表末尾const cloneImg = document.querySelectorAll('.item')[0].cloneNode(true)imgList.appendChild(cloneImg)const items = document.querySelectorAll('.item')let idx = 0let click;//节流器clickleft.addEventListener('click', () => {// 清除之前的定时器clearTimeout(click)clearInterval(timer)click = setTimeout(() => {//节流，每500毫秒只能触发一次if (idx == 0) {idx = items.length - 1imgList.style = `margin-left:${idx * -400}px`//没有间隔大幅度的位移也会触发动效，要有时间间隔，哪怕0.00001slet imgChange = setTimeout(() => { idx--; imgMove() }, 10)} else {idx--imgMove()}timer = setInterval(timeInt, 2000)}, 500)})right.addEventListener('click', () => {clearTimeout(click)clearInterval(timer)click = setTimeout(() => {if (idx == items.length - 1) {idx = 0imgList.style = `margin-left:${idx * -400}px`let imgChange = setTimeout(() => { idx++; imgMove() }, 1)} else {idx++imgMove()}timer = setInterval(timeInt, 2000)}, 500)})let timer = setInterval(timeInt, 2000)//自动轮播定时器function timeInt(){right.click()}//right.click() 模拟点击事件function imgMove() {//图片轮播函数，控制图片切换速度imgList.style = `transition:0.8s ease; margin-left:${idx * -400}px`}

css

 body {display: flex;justify-content: center;align-items: center;}div {position: relative;width: 400px;height: 400px;overflow: hidden;}.imgList {position: relative;padding: 0;display: flex;flex-direction: row;}.item {list-style: none;}.left,.right {font-size: large;position: absolute;z-index: 100;background-color: rgba(16, 42, 64, 0.583);border: rgba(16, 42, 64, 0.583);border-radius: 3px;top: 50%;}.left {left: 0;}.right {right: 0;}

用transition实现轮播图无缝衔接相关推荐

JS实现轮播图-无缝衔接
在这里封装了一个改变元素节点的运动的函数,使用的时候只要调用即可: 1.第一个参数是要操作元素节点. 2.第二个参数是一个对象存放样式名和对应样式的目标值. 3.第三个参数是回调函数,在不需要的时候可 ...
用animation实现轮播图无缝衔接
思路使用animation来展示轮播图: 轮播分为两个独立的部分:位移与动效.使二者互不影响动效分为进入动画和退出动画在所有动效结束后位移 html部分 <body><u ...
JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...
Transition 实现轮播图
关于轮播图的实现算是前端的一个基础,其实实现起来是很简单,这里把实现的基本思路总结一下. 轮播图的实现方案有很多种方式,可以用纯js来实现,也可用css来实现,我们这里主要用到了css3的过渡(tra ...
jq轮播图——无缝轮播
css代码: /* 整个轮播图 */ .banner{width: 520px;height: 280px;overflow: hidden;margin:10% auto;position: rel ...
【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
无缝轮播图无缝轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
jQuery实现的无缝轮播图
其实只要原生js学好了,能够实现轮播图无缝切换,再用jQuery写,感觉简单多了,嗯.为了熟悉jQuery的用法,还是动手把它实现了,废话不多说,看代码吧,实现的过程都注释在代码中了,嗯.要养成注释的 ...

用transition实现轮播图无缝衔接

思路

html

script

css

用transition实现轮播图无缝衔接相关推荐

最新文章

热门文章

用transition实现轮播图无缝衔接

思路

​html

​script

css

用transition实现轮播图无缝衔接相关推荐

最新文章

热门文章

html

script