轮播图开发

HTML布局主要分为了三部分：左右切换按钮、图片列表、底部数字切换按钮

 实现交互点：图片能自动轮播，轮播有动画效果，按钮有选中效果，点击左右按钮可切换，点击数字可以切换到对应图片

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125

<div class="container">     <!--  图片列表  -->     <ul class="ul-img">       <li class="li-img">1</li>       <li class="li-img">2</li>       <li class="li-img">3</li>       <li class="li-img">4</li>       <li class="li-img">5</li>     </ul>       <!--  上一张、下一张按钮  -->     <div class="prev">       <span><</span>     </div>     <div class="next">       <span>></span>     </div>       <!-- 数字切换按钮 -->     <div class="num-box">       <ul class="num-ul">         <li data-index="0">1</li>         <li data-index="1">2</li>         <li data-index="2">3</li>         <li data-index="3">4</li>         <li data-index="4">5</li>       </ul>     </div> </div> .container {   position: relative;   width: 600px;   height: 400px;   margin: 0 auto;   background-color: gray;   overflow: hidden; }   .ul-img {   position: absolute;   display: flex;   width: 4200px;   height: 400px;   left: 0;   padding: 0;   margin: 0; }   .li-img {   list-style: none;   width: 600px;   height: 400px;   display: flex;   align-items: center;   justify-content: center;   background-color: aquamarine;   font-size: 30px;   font-weight: 800;   border: 1px solid #ccc; }   /* 上一张、下一张 */ .prev, .next {   position: absolute;   height: 400px;   width: 80px;   display: flex;   justify-content: center;   align-items: center;   top: 0; }   .prev {   left: 0; }   .next {   right: 0; }   .prev span, .next span {   display: block;   color: #fff;   width: 40px;   height: 40px;   display: flex;   justify-content: center;   align-items: center;   background-color: rgba(0, 0, 0, 0.5);   border-radius: 50%;   cursor: pointer; }   /* 数字切换按钮 */ .num-box {   position: absolute;   left: 50%;   bottom: 20px;   transform: translate(-50%, 0);   z-index: 2; }   .num-ul {   list-style: none;   margin: 0;   padding: 0;   display: flex; }   .num-ul li {   height: 20px;   width: 20px;   border-radius: 50%;   background-color: rgba(0, 0, 0, 0.5);   display: flex;   justify-content: center;   align-items: center;   font-size: 9px;   color: #fff;   margin: 0 4px;   cursor: pointer;   user-select: none; }

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

// 获取元素节点 var containerDom = document.getElementsByClassName("container")[0]; // 容器 var ulDom = document.getElementsByClassName("ul-img")[0]; // 图片盒子 var prevDom = document.getElementsByClassName("prev")[0].firstElementChild; // 上一张按钮 var nextDom = document.getElementsByClassName("next")[0].firstElementChild; // 下一张按钮 var numUlDom = document.getElementsByClassName("num-ul")[0]; // 数字按钮父级容器 var numList = document   .getElementsByClassName("num-ul")[0]   .getElementsByTagName("li"); // 数字切换按钮列表   // 定义全局变量 var currentIndex = 0; // 当前显示的图片索引 var timer = null; // 自动播放定时器 numList[currentIndex].style.backgroundColor = "#ccc"; // 默认选中第一个数字 // 上一张 prevDom.addEventListener("click", prevFun); // 下一张 nextDom.addEventListener("click", nextFun); // 鼠标移入容器，停止自动播放 containerDom.addEventListener("mouseenter", stopAutoPlay); // 鼠标移出容器，开启自动播放 containerDom.addEventListener("mouseleave", autoPlay); // 数字按钮点击事件 numUlDom.addEventListener("click", numClick);   // 开启自动播放 autoPlay();   // 切换上一张 function prevFun() {   ulDom.style.transition = "0.5s";   numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式   if (currentIndex === 0) {     ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画     currentIndex = 4;   } else {     --currentIndex;   }   ulDom.style.left = `-${currentIndex * 600}px`;   numList[currentIndex].style.backgroundColor = "#ccc"; }   // 切换下一张 function nextFun() {   ulDom.style.transition = "0.5s";   numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式   if (currentIndex === 4) {     ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画     currentIndex = 0; // 重新播放第一张   } else {     ++currentIndex;   }   ulDom.style.left = `-${currentIndex * 600}px`;   numList[currentIndex].style.backgroundColor = "#ccc"; // 设置按钮选中样式 }   // 数字按钮点击事件 function numClick(e) {   ulDom.style.transition = "0.5s";   let index = e.target.dataset.index;   if (index == undefined) {     return;   }   numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式   currentIndex = Number(index);   numList[currentIndex].style.backgroundColor = "#ccc";   ulDom.style.left = `-${currentIndex * 600}px`; }   // 循环播放 function autoPlay() {   timer = setInterval(nextFun, 1000); }   // 关闭自动播放 function stopAutoPlay() {   // 清除定时器   clearInterval(timer); }

js部分大概有五个主要的方法：

• prevFun()：点击切换上一张
• nextFun()：点击切换下一张
• numClick(e)：点击数字按钮
• autoPlay()：循环播放轮播
• stopAutoPlay()：关闭自动播放