JS轮播图
轮播图可以说是网页上十分常见的效果，很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来，那么轮播图就是一个很不错的练手实例。下面就是通过JS写的轮播图效果：
功能介绍
1.上/下按钮切换图片
2.点击圆点按钮切换到相应的图片
3.自动播放效果 (4秒间隔)
4.当鼠标放在图片上时，停止轮播效果；鼠标移开图片时，又出现轮播效果
实现方法如下：
html代码
<div id="Box"><div class="img show">One</div><div class="img">Two</div><div class="img">Three</div><div class="img">Four</div><div class="img">Five</div><!--上一张按钮--><span class="prev"><</span><!--下一张按钮--><span class="next">></span><div class="div1"><span class="little little_show" data-index="0"></span><span class="little" data-index="1"></span><span class="little" data-index="2"></span><span class="little" data-index="3"></span><span class="little" data-index="4"></span></div></div>
CSS代码如下：
本文写的轮播图，主要依靠opacity属性的值来控制
.img {position: absolute;top: 100px;left: 50%;width: 480px;height: 270px;margin-left: -240px;color: #FFFFFF;/*设置图片默认透明度为0 */opacity: 0;/*设置图片过度效果， 会出现淡入淡出效果 */transition: all .8s;}.img:nth-child(1){background: url("background/text1.jpg");background-size: 100%;}.img:nth-child(2){background: url("background/text2.jpg");background-size: 100%;}.img:nth-child(3){background: url("background/text3.jpg");background-size: 100%;}.img:nth-child(4){background: url("background/text4.jpg");background-size: 100%;}.img:nth-child(5){background: url("background/text5.jpg");background-size: 100%;}.prev {position: absolute;top: 185px;left: 50%;width: 20px;height: 30px;border: 1px solid rgba(255, 255, 255, .2);border-radius: 0 5px 5px 0;margin-top: 30px;margin-left: -240px;color: #c2c1cb;text-align: center;background-color: rgba(255, 255, 255, .2);cursor: pointer;}.next {position: absolute;top: 185px;left: 50%;width: 20px;height: 30px;border: 1px solid rgba(255, 255, 255, .2);border-radius: 5px 0 0 5px;margin-top: 30px;margin-left: 218px;color: #c2c1cb;text-align: center;background-color: rgba(255, 255, 255, .2);cursor: pointer;}.next:hover,.prev:hover {background-color: rgba(1, 1, 1, 0.73);color: #FFFFFF;}.div1 {position: absolute;top: 350px;left: 50%;margin-left: -40px;}.little {float: left;width: 10px;height: 10px;border-radius: 100%;background-color: rgba(255, 245, 244, .3);margin-left: 4px;cursor: pointer;border: 1px solid #464646;}.show{/*通过添加show，改变图片透明度，从而实现切换效果*/opacity: 1;}.little_show {background-color: #FFFFFF;}
JS代码如下：
let img = document.getElementsByClassName("img"); //获取所有轮播图片 集合let next = document.querySelector(".next"); //获取下一张 按钮let prev = document.querySelector(".prev");//获取上一张 按钮let box = document.getElementById("Box");//获取整个盒子let little = document.getElementsByClassName("little"); //获取所有轮播圆点按钮 集合let index = 0;let time = 0;// 重置所有classlet clear = function () {for (let i = 0;i < img.length; i++){img[i].className = "img";}for (let i = 0;i < little.length;i++){little[i].className = "little";}};let show = function () {img[index].className = "img show";little[index].className = "little little_show";time = 0;};// 下一张let nextBtn = function () {clear();index++;if(index >img.length-1){index = 0;}show();};next.addEventListener("click",function () {nextBtn();});// 上一张let prevBtn = function () {clear();index--;if(index < 0){index = img.length-1;}show();};prev.addEventListener("click",function () {prevBtn();});// 按钮for (let i = 0; i < little.length;i++){little[i].addEventListener("click",function () {clear();index = this.getAttribute("data-index");show();})}let timer;//全局变量，接收定时器function autoTime(){//timer接收定时器timer = setInterval(function () {time++;if(time === 4){nextBtn();}else if(time > 4){time = 0;}console.log("time = "+time);},1000);}// 调用轮播图自动播放方法autoTime();// 当鼠标移入imgBox时，停止轮播，清除定时器box.onmouseover = function () {clearInterval(timer);};// 当鼠标移出imgBox时，重新调用定时器并重置timebox.onmouseout = function () {time = 0;autoTime();};
以上就是JS轮播图的代码，小伙伴们可以参考代码手动敲一敲；
这几天写页面的时候，发现写轮播图的时候自己脑子有点转不过来了…
所以写这篇文章记录一下，方便自己后续查看，也给更多想写JS轮播图的朋友提供一个参考…
前端小白一枚，路过的还请大佬勿喷…
有什么不对的地方也请各位大佬指点…
