JS轮播图（点击切换、自动播放、悬停控制）

JS轮播图

轮播图可以说是网页上十分常见的效果，很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来，那么轮播图就是一个很不错的练手实例。下面就是通过JS写的轮播图效果：

功能介绍

1.上/下按钮切换图片
2.点击圆点按钮切换到相应的图片
3.自动播放效果 (4秒间隔)
4.当鼠标放在图片上时，停止轮播效果；鼠标移开图片时，又出现轮播效果

实现方法如下：

html代码

<div id="Box">
  <div class="img show">Onediv>
  <div class="img">Twodiv>
  <div class="img">Threediv>
  <div class="img">Fourdiv>
  <div class="img">Fivediv>

  
  <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;

// 重置所有class
let 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时，重新调用定时器并重置time
box.onmouseout = function () {
     
  time = 0;
  autoTime();
};

以上就是JS轮播图的代码，小伙伴们可以参考代码手动敲一敲；

这几天写页面的时候，发现写轮播图的时候自己脑子有点转不过来了…
所以写这篇文章记录一下，方便自己后续查看，也给更多想写JS轮播图的朋友提供一个参考…

前端小白一枚，路过的还请大佬勿喷…
有什么不对的地方也请各位大佬指点…