我的轮播图功能有：自动播放、点击焦点切换和点击左右按钮切换
效果图：
自动轮播
点击焦点切换
点击左右按钮切换
注意：本文用带背景颜色的li标签指代图片，有需要的话可以将图片插入li标签内
思路：
基础布局和css样式
（1） 给盛放要轮播的图片的盒子绝对定位
js中的代码
（2） 复制第一张图片放在盒子最后，复制最后一张图片放在盒子最前，以保证轮播图左右滑动效果（否则看起来会有一点卡顿）
（3）设置盒子位置，通过移动这个盒子的位置，产生图片移动的效果，用定时器设置轮播效果
（4）设置鼠标划入停播事件，设置按钮点击事件，设置焦点点击事件
（5）解决点击太快定时器混乱问题，解决切屏后定时器混乱问题
一 布局
<!-- 布局 --> <section> <ul> <li>1</li> <li>2</li> <li>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; }
三 原生js
1、获取元素
//1、获取盛放图片的盒子和盛放焦点的盒子 let ul = document.querySelector('ul') let ol = document.querySelector('ol') //获取大盒子和大盒子的宽 let wrap = document.querySelector('section') let wrap_width = wrap.clientWidth
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 = ul.lastElementChild.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 -= 5 ele.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 = 1 ul.style.left = -index * wrap_width + 'px' } if (index <= 0) { index = ol.children.length - 1 ul.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、点击左右按钮切换图片