js实现左右轮播图本⽂实例为⼤家分享了js实现左右轮播图的具体代码，供⼤家参考，具体内容如下我的轮播图功能有：⾃动播放、点击焦点切换和点击左右按钮切换效果图：⾃动轮播点击焦点切换点击左右按钮切换注意：本⽂⽤带背景颜⾊的li标签指代图⽚，有需要的话可以将图⽚插⼊li标签内思路：基础布局和css样式（1）给盛放要轮播的图⽚的盒⼦绝对定位js中的代码（2）复制第⼀张图⽚放在盒⼦最后，复制最后⼀张图⽚放在盒⼦最前，以保证轮播图左右滑动效果（否则看起来会有⼀点卡顿）（3）设置盒⼦位置，通过移动这个盒⼦的位置，产⽣图⽚移动的效果，⽤定时器设置轮播效果（4）设置⿏标划⼊停播事件，设置按钮点击事件，设置焦点点击事件（5）解决点击太快定时器混乱问题，解决切屏后定时器混乱问题⼀布局<!-- 布局 --><section><ul><li style="background-color:aqua;">1</li><li style="background-color: burlywood;">2</li> <li style="background-color: coral;">3</li></ul><ol></ol><div><a href=""><</a><a href="">></a></div>⼆样式* {margin: 0;padding: 0;}ul,ol,li {list-style: none;}a {text-decoration: none;}section {width: 300px;margin: 30px auto;height: 200px;border: 5px solid;position: relative;/* overflow: hidden; */}ul {width: 300%;height: 100%;text-align: center;line-height: 200px;font-size: 100px;position: absolute;top: 0;left: 0;}li {width: 300px;height: 100%;float: left;}ol {width: 150px;height: 20px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);border-radius: 15px;display: flex;justify-content: space-evenly;align-items: center;}ol li {width: 15px;height: 15px;background-color: ivory;border-radius: 50%;.active {background-color: greenyellow;}三原⽣js1、获取元素//1、获取盛放图⽚的盒⼦和盛放焦点的盒⼦let ul = document.querySelector('ul')let ol = document.querySelector('ol')//获取⼤盒⼦和⼤盒⼦的宽let wrap = document.querySelector('section')let wrap_width = wrap.clientWidth2、添加焦点const frg = document.createDocumentFragment()for (let i = 0; i < ul.children.length; i++) {let focus = document.createElement('li')frg.appendChild(focus)//焦点初始化if (i == 0) focus.className = 'active'}ol.appendChild(frg)3、复制元素复制元素，将复制元素放在指定位置改变盛放图⽚的盒⼦⼤⼩,改变图⽚位置，使页⾯打开时显⽰第⼀张图⽚let first = ul.firstElementChild.cloneNode(true)let last = stElementChild.cloneNode(true)ul.appendChild(first)ul.insertBefore(last, ul.firstElementChild)ul.style.width = ul.children.length * 100 + '%'ul.style.left = -wrap_width + 'px'4、开始轮播//设置⼀个图⽚索引let index = 1//⼀会⼉会⽤到这段代码，就直接封装成函数了autoplay()//⾃动播放函数，每隔两秒切换⼀次图⽚function autoplay() {move_time = setInterval(() => {index++move(ul, 'left', -index * wrap_width, movend)}, 2000)}//运动函数，设置图⽚切换⽅式//参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数 function move(ele, type, value, cb) {//获取元素属性初始值let spe = parseInt(getComputedStyle(ele)[type])//元素属性改变过程change_timer = setInterval(() => {value > spe ? spe += 5 : spe -= 5ele.style[type] = spe + 'px'if (value > spe) {if (spe >= value) {clearInterval(change_timer)cb()}} else {if (spe <= value) {clearInterval(change_timer)cb()}}}, 10)//运动结束函数//判断索引临界值，更改索引，更改盒⼦位置，使图⽚轮播//让焦点和图⽚配套function movend() {if (index >= ul.children.length - 1) {index = 1ul.style.left = -index * wrap_width + 'px'}if (index <= 0) {index = ol.children.length - 1ul.style.left = -index * wrap_width + 'px'}for (let i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}ol.children[index - 1].className = 'active'}5、⿏标移⼊停播，移出开始播放wrap.onmouseover = () => clearInterval(move_time)wrap.onmouseout = () => autoplay()6、点击左右按钮切换图⽚//获取左右按钮let left = document.querySelector('div').firstElementChildlet right = document.querySelector('div').lastElementChild//点击左按钮，索引减少，图⽚切到上⼀张left.onclick = function() {index--move(ul, 'left', -index * wrap_width, movend)}//点击右按钮，索引增加，图⽚切到下⼀张right.onclick = function() {index++move(ul, 'left', -index * wrap_width, movend)}7、点击焦点切换图⽚for (let i = 0; i < ol.children.length; i++) {//获取焦点索引ol.children[i].id = i//点击焦点切换图⽚ol.children[i].onclick = function() {index = this.id - 0 + 1move(ul, 'left', -index * wrap_width, movend)}}8、解决切屏后定时器混乱问题9、解决点击太快定时器混乱问题添加开关，点击前关着，点击后图⽚未切换完成开着，图⽚切换完打开开关，将语句添加进点击事件函数中即可if (flag) returnflag = true四全部代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>轮播图21</title><style>* {margin: 0;padding: 0;}ol,li {list-style: none;}a {text-decoration: none;}section {width: 300px;margin: 30px auto;height: 200px;border: 5px solid;position: relative;overflow: hidden;}ul {width: 300%;height: 100%;text-align: center;line-height: 200px;font-size: 100px;position: absolute;top: 0;left: 0;}li {width: 300px;height: 100%;float: left;}ol {width: 150px;height: 20px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);border-radius: 15px;display: flex;justify-content: space-evenly;align-items: center;}ol li {width: 15px;height: 15px;background-color: ivory;border-radius: 50%;}.active {background-color: purple;}div {position: absolute;font-size: 20px;height: 30px;width: 100%;top: 50%;transform: translateY(-50%);display: flex;justify-content: space-between;align-items: center;}div a {background-color: rgba(0, 0, 0, 0.2); width: 30px;div a:active {background-color: rgba(0, 0, 0, 0.5);}</style></head><body><!-- 布局 --><section><ul><li style="background-color:aqua;">1</li><li style="background-color: burlywood;">2</li><li style="background-color: coral;">3</li></ul><ol></ol><div><a href="javascript:;" rel="external nofollow" rel="external nofollow" ><</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" >></a></div></section><script></script><script>//⾃动播放函数，每隔两秒切换⼀次图⽚function autoplay() {move_time = setInterval(() => {index++move(ul, 'left', -index * wrap_width, movend)}, 2000)}//运动函数，设置图⽚切换⽅式//参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数 function move(ele, type, value, cb) {//获取元素属性初始值let spe = parseInt(getComputedStyle(ele)[type])//元素属性改变过程change_timer = setInterval(() => {value > spe ? spe += 10 : spe -= 10ele.style[type] = spe + 'px'if (value > spe) {if (spe >= value) {clearInterval(change_timer)cb()}} else {if (spe <= value) {clearInterval(change_timer)cb()}}}, 10)}//运动结束函数//判断索引临界值，更改索引，更改盒⼦位置，使图⽚轮播//让焦点和图⽚配套function movend() {if (index >= ul.children.length - 1) {index = 1ul.style.left = -index * wrap_width + 'px'}if (index <= 0) {index = ol.children.lengthul.style.left = -index * wrap_width + 'px'}for (let i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}ol.children[index - 1].className = 'active'flag = false}//1、获取盛放图⽚的盒⼦和盛放焦点的盒⼦let ul = document.querySelector('ul')let ol = document.querySelector('ol')//获取⼤盒⼦和⼤盒⼦的宽let wrap = document.querySelector('section')let wrap_width = wrap.clientWidth//9、解决连续点击页⾯混乱问题//添加开关，点击前关着，点击后图⽚未切换完成开着，图⽚切换完打开开关let flag = false//2、添加焦点const frg = document.createDocumentFragment()for (let i = 0; i < ul.children.length; i++) {let focus = document.createElement('li')frg.appendChild(focus)//焦点初始化if (i == 0) focus.className = 'active'}ol.appendChild(frg)//3、复制元素，将复制元素放在指定位置//改变盛放图⽚的盒⼦⼤⼩,改变图⽚位置，使页⾯打开时显⽰第⼀张图⽚let first = ul.firstElementChild.cloneNode(true)let last = stElementChild.cloneNode(true)ul.appendChild(first)ul.insertBefore(last, ul.firstElementChild)ul.style.width = ul.children.length * 100 + '%'ul.style.left = -wrap_width + 'px'//4、图⽚⾃动轮播//设置⼀个图⽚索引let index = 1//⼀会⼉会⽤到这段代码，就直接封装成函数了autoplay()//5、⿏标移⼊停播，移出开始播放wrap.onmouseover = () => clearInterval(move_time)wrap.onmouseout = () => autoplay()//6、点击左右按钮切换图⽚//获取左右按钮let left = document.querySelector('div').firstElementChildlet right = document.querySelector('div').lastElementChild//点击左按钮，索引减少，图⽚切到上⼀张left.onclick = function() {if (flag) returnindex--move(ul, 'left', -index * wrap_width, movend)flag = true}//点击右按钮，索引增加，图⽚切到下⼀张right.onclick = function() {if (flag) returnindex++move(ul, 'left', -index * wrap_width, movend)flag = true}//7、点击焦点切换图⽚for (let i = 0; i < ol.children.length; i++) {//获取焦点索引ol.children[i].id = i//点击焦点切换图⽚ol.children[i].onclick = function() {if (flag) returnindex = this.id - 0 + 1move(ul, 'left', -index * wrap_width, movend)flag = true}}//8、解决切屏后页⾯混乱问题document.onvisibilitychange = () => document.visibilityState == 'hidden' ? clearInterval(move_time) : autoplay() </script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
