释放双眼，带上耳机，听听看~！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 5000px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: yellow;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style></head><body><div class="all" id='box'><div class="screen"><ul><li><img src="images/1.jpg" width="500" height="200" /></li><li><img src="images/2.jpg" width="500" height="200" /></li><li><img src="images/3.jpg" width="500" height="200" /></li><li><img src="images/4.jpg" width="500" height="200" /></li><li><img src="images/5.jpg" width="500" height="200" /></li><li><img src="images/5.jpg" width="500" height="200" /></li></ul><ol><!-- 动态创建的小方块，添加在这里，样式已经给写好了--></ol></div><div id="arr"><span id="left"><</span><span id="right">></span></div></div><script>//思路//1.获取对应的元素// 获取移动的单位宽//2.根据轮播图片的个数,来动态的生成右下角的小方块们.// 右下角的小方块其实就是ol中的li标签// ol中的第一个li标签要有颜色(添加一个current类)//3.简单轮播// 遍历ol中的每一个li标签// 给每一个li标签添加索引// 给每一个li标签设置单击事件.// 颜色排他// 获取当前点击的小方块的索引// 计算要移动的目标位置// 调用animate来做动画// 注意: ******//4.左右焦点轮播// 显示隐藏左右焦点// 右边焦点设置点击事件.// 移动出去的图片张数++// 计算移动的目标位置// 调用animate来移动// 右下角小方块的颜色要对应上// 无限无缝轮播// 左边焦点设置点击事件.//1.获取对应的元素.let box = document.getElementById('box'); //大盒子let screenBox = document.querySelector('.screen');let unitWidth = screenBox.offsetWidth; //移动的单位宽let ul1 = screenBox.children[0]; //要动画移动的ul标签.let lisUL = ul1.children; //ul中的所有li标签let ol1 = screenBox.children[1]; //ol标签,装右下角所有的小方块的.let arrDiv = document.getElementById('arr'); //左右焦点盒子let leftSpan = document.getElementById('left'); //左焦点let rightSpan = document.getElementById('right'); //右焦点//2.根据轮播图图片的个数,来生成右下角的小方块.for (let i = 0; i < lisUL.length; i++) {//创建li标签let liNew = document.createElement('li');//给li标签设置内容liNew.innerText = i + 1;//把生成的li添加到ol中ol1.appendChild(liNew);}// 默认ol中的第一个li标签有一个current类.let lisOl = ol1.children; //ol中的所有li标签,也就是右下角的所有小方块.lisOl[0].setAttribute('class', 'current');//3.简单轮播// 遍历右下角的每一个小方块(ol中的li标签们)for (let i = 0; i < lisOl.length; i++) {//给每一个小方块li添加索引lisOl[i].setAttribute('index', i);//给每一个小方块li注册点击事件.lisOl[i].onclick = function () {//颜色排他.for (let j = 0; j < lisOl.length; j++) {lisOl[j].removeAttribute('class');}this.setAttribute('class', 'current');//获取当前点击的小方块的索引let idx = this.getAttribute('index');//计算要运动的目标位置let target = -idx * unitWidth;//调用animate来做动画animate(ul1, target);//注意: *******索引要统一picIndex = liIndex = idx;}}//4.左右焦点轮播.//4.0 声明一个变量,用来记录图片滚出去的个数.let picIndex = 0;//4.0 给ul中再添加一张轮播图片(其实添加的这一张就是第一张一模一样的.)ul1.appendChild(lisUL[0].cloneNode(true));//4.0 声明一个变量,用来记录右下角的小方块滚出去的个数.let liIndex = 0;//4.1 显示隐藏左右焦点.box.onmouseover = function () {arrDiv.style.display = 'block';//停止自动轮播clearInterval(timerId);}box.onmouseout = function () {arrDiv.style.display = 'none';//重新自动轮播timerId = setInterval(nextPic, 2000);}//4.2 右边焦点设置点击事件.rightSpan.onclick = function () {nextPic();}//把右边焦点点击事件代码封装成一个函数function nextPic() {//无限无缝轮播.//如果当前索引是5,显示的就是克隆的哪一张(普通用户看到的是第一张)//我们就应该马上把索引改成0,位置马上改成真正的第一张.if (picIndex == lisUL.length - 1) {picIndex = 0;ul1.style.left = '0px';}// console.log(lisUL.length);//移动出去的图片张数++picIndex++;//计算目标位置let target = -picIndex * unitWidth;//调用animate函数来做动画animate(ul1, target);//右下角小方块们的颜色要对应上.liIndex++;if (liIndex == lisUL.length - 1) {liIndex = 0;}console.log(liIndex);for (let i = 0; i < lisOl.length; i++) {lisOl[i].removeAttribute('class');}lisOl[liIndex].setAttribute('class', 'current');}//4.3 左边焦点设置点击事件.leftSpan.onclick = function () {//无限无缝轮播.//如果当前索引是5,显示的就是克隆的哪一张(普通用户看到的是第一张)//我们就应该马上把索引改成0,位置马上改成真正的第一张.if (picIndex == 0) {picIndex = lisUL.length - 1;ul1.style.left = -(lisUL.length - 1) * unitWidth + 'px';}//移动出去的图片张数--picIndex--;//计算目标位置let target = -picIndex * unitWidth;//调用animate函数来做动画animate(ul1, target);//右下角小方块们的颜色要对应上.liIndex--;if (liIndex < 0) {liIndex = lisUL.length - 2; // 索引比图片少 1 再加上克隆的一张图片 所以 需要减去 2}console.log(liIndex);for (let i = 0; i < lisOl.length; i++) {lisOl[i].removeAttribute('class');}lisOl[liIndex].setAttribute('class', 'current');}//5.自动轮播//设置计时器,间隔时间去调用nextPiclet timerId = setInterval(nextPic, 2000);</script><script>// 1、 匀速轮播// 封装一个animate函数// 01 - 运动的目标位置不写死.// 02 - 做运动的元素不写死// 03 - 运动的方向不写死// function animate(ele, target) {// //设置新计时器之前要清空老的计时器// clearInterval(ele.timerId);// //设置计时器// ele.timerId = setInterval(function () {// //获取元素当前的定位的left值// let currentLeft = ele.offsetLeft;// //设置步长// let step = target > currentLeft ? 30 : -30;// //计算运动后的位置.// currentLeft += step;// // console.log(currentLeft);// //判断赋值// if (Math.abs(target - currentLeft) > Math.abs(step)) {// ele.style.left = currentLeft + "px";// } else {// ele.style.left = target + "px";// clearInterval(ele.timerId);// }// }, 50);// }// 2、缓动轮播//封装一个animateSlow函数//01-运动的目标位置不写死.//02-做运动的元素不写死//03-运动的方向不写死function animate(ele, target) {//设置新计时器之前要清空老的计时器clearInterval(ele.timerId);//设置计时器ele.timerId = setInterval(function () {//获取元素当前的定位的left值let currentLeft = ele.offsetLeft;//设置步长let step = (target - currentLeft) / 5;step = step > 0 ? Math.ceil(step) : Math.floor(step);//计算运动后的位置.currentLeft += step;// console.log(currentLeft);//判断赋值if (Math.abs(target - currentLeft) > Math.abs(step)) {ele.style.left = currentLeft + "px";} else {ele.style.left = target + "px";clearInterval(ele.timerId);}}, 50);}</script></body></html>
内容投诉
