思路

使用animation来展示轮播图：
轮播分为两个独立的部分：位移与动效。使二者互不影响
动效分为进入动画和退出动画
在所有动效结束后位移

html部分

<body><ul class="imgList"><button class="left">&lt</button><button class="right">&gt</button><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></body>

script部分

const items = document.querySelectorAll('.item')const left = document.querySelector('.left')//上一张按钮const right = document.querySelector('.right')//下一张按钮const imgList = document.querySelector('.imgList') let idx = 0let click;//节流器clickitems[0].style.left = 0//默认展示图片//监听每一个item的动画结束事件items.forEach(item => {item.addEventListener('animationend', () => {item.classList.value = 'item' //移除item的动画属性})})left.addEventListener('click', () => {clearTimeout(click)click = setTimeout(() => {//动效部分items[idx].classList.add('right-leave')//判断是否为第一张图，是=> 跳最后一张，不是=> 跳上一张idx = idx == 0 ? items.length - 1 : idx - 1items[idx].classList.add('left-enter')//位移部分itemMove()//所有item移出，仅把当前要展示的图移入restartInterval()//重启定时轮播}, 500)})right.addEventListener('click', () => {clearTimeout(click)click = setTimeout(() => {items[idx].classList.add('left-leave')//判断是否为最后张图，是=> 跳第一张，不是=> 跳下一张idx = idx == items.length - 1 ? 0 : idx + 1items[idx].classList.add('right-enter')itemMove()restartInterval()}, 500)})//所有item移出，仅把当前要展示的图移入function itemMove() {items.forEach(item => {           item.style.left = '400px'           })items[idx].style.left = 0}//element.click() 模拟点击事件let timer = setInterval(() => { right.click() }, 4000)//重启定时轮播function restartInterval() {clearInterval(timer)timer = setInterval(() => { right.click() }, 4000)}//鼠标悬停，停止轮播，鼠标移除，继续轮播imgList.addEventListener('mouseenter', () => {clearInterval(timer)})imgList.addEventListener('mouseleave', () => {timer = setInterval(() => { right.click() }, 4000)})

css部分

body {display: flex;justify-content: center;align-items: center;}.imgList {position: relative;padding: 0;width: 400px;height: 400px;overflow: hidden;display: flex;flex-direction: row;}.item {list-style: none;position: absolute;left: 400px;}.left-enter {animation: 0.5s left;}.right-leave {animation: 0.5s right;}.right-enter {animation: 0.5s right;/* 反向播放动画 */animation-direction: reverse; }.left-leave {animation: 0.5s left;animation-direction: reverse; }@keyframes left {from {left: -400px}to {left: 0px}}@keyframes right {from {left: 0px}to {left: 400px}}.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;}

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

JS实现轮播图-无缝衔接
在这里封装了一个改变元素节点的运动的函数,使用的时候只要调用即可: 1.第一个参数是要操作元素节点. 2.第二个参数是一个对象存放样式名和对应样式的目标值. 3.第三个参数是回调函数,在不需要的时候可 ...
用transition实现轮播图无缝衔接
思路无缝衔接是障眼法,复制第一张图到末尾,使头尾图片相同每次第一张向左切换时,先大幅位移到最后一张,再开启transition,就没有缝了每次最后一张向右切换时,先大幅位移到第一张,再开启tra ...
JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...
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> ...
jQuery实现的无缝轮播图
其实只要原生js学好了,能够实现轮播图无缝切换,再用jQuery写,感觉简单多了,嗯.为了熟悉jQuery的用法,还是动手把它实现了,废话不多说,看代码吧,实现的过程都注释在代码中了,嗯.要养成注释的 ...
jquery轮播图无缝连接实现
经过一段时间的学习和实践,以及参考了许多中idea之后,实现了这个轮播图无缝链接.(这只是本人自己的方法)步骤如下: (1)要实现无缝连接,最好是有若干张长宽都一样的图片(数量大概在3到6张,多的就少 ...
【学习笔记57】轮播图代码的实现
一.HTML代码 <div class="banner"><ul class="img_box&quo ...

用animation实现轮播图无缝衔接

思路

使用animation来展示轮播图：

轮播分为两个独立的部分：位移与动效。使二者互不影响

动效分为进入动画和退出动画

在所有动效结束后位移

html部分

script部分

css部分

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

最新文章

热门文章

用animation实现轮播图无缝衔接

思路

使用animation来展示轮播图：

轮播分为两个独立的部分：位移 与 动效。使二者互不影响

动效分为进入动画和退出动画

在所有动效结束后位移

html部分

script部分

css部分

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

最新文章

热门文章

轮播分为两个独立的部分：位移与动效。使二者互不影响