功能概要：

1. 自动播放轮播图
2. 点击左右移动轮播图
3. 鼠标移入到标签上显示对应图片
4. 移入停止轮播，左右按钮显示
5. 移出左右按钮隐藏

效果图：

原生 js 实现轮播图

• html 代码：

<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>
		</ul>
		<ol>
		</ol>
	</div>
	<div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

• css 代码：

<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: 3000px;
	}

	.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: #DB192A;
	}

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

• js 代码：

<script>
	//获取最外面的div
	var box = my$("box");
	//获取相框
	var screen = box.children[0];
	//获取相框的宽度
	var imgWidth = screen.offsetWidth;
	//获取ul
	var ulObj = screen.children[0];
	//获取ul中的所有的li
	var list = ulObj.children;
	//获取ol
	var olObj = screen.children[1];
	//焦点的div
	var arr = my$("arr");
	console.log(imgWidth)
	var pic = 0; //全局变量
	//创建小按钮----根据ul中的li个数
	for (var i = 0; i < list.length; i++) {
		//创建li标签,加入到ol中
		var liObj = document.createElement("li");
		olObj.appendChild(liObj);
		liObj.innerHTML = (i + 1);
		//在每个ol中的li标签上添加一个自定义属性,存储索引值
		liObj.setAttribute("index", i);
		//注册鼠标进入事件
		liObj.onmouseover = function() {
			//先干掉所有的ol中的li的背景颜色
			for (var j = 0; j < olObj.children.length; j++) {
				olObj.children[j].removeAttribute("class");
			}
			//设置当前鼠标进来的li的背景颜色
			this.className = "current";
			//获取鼠标进入的li的当前索引值
			pic = this.getAttribute("index");
			//移动ul
			animate(ulObj, -pic * imgWidth);
		};
	}
	//设置ol中第一个li有背景颜色
	olObj.children[0].className = "current";


	//克隆一个ul中第一个li,加入到ul中的最后=====克隆
	ulObj.appendChild(ulObj.children[0].cloneNode(true));

	//自动播放
	var timeId = setInterval(clickHandle, 1000);

	//鼠标进入到box的div显示左右焦点的div
	box.onmouseover = function() {
		arr.style.display = "block";
		//鼠标进入废掉之前的定时器
		clearInterval(timeId);
	};
	//鼠标离开到box的div隐藏左右焦点的div
	box.onmouseout = function() {
		arr.style.display = "none";
		//鼠标离开自动播放
		timeId = setInterval(clickHandle, 1000);
	};
	//右边按钮
	my$("right").onclick = clickHandle;

	function clickHandle() {
		//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
		//所以,如果用户再次点击按钮,用户应该看到第二个图片
		if (pic == list.length - 1) {
			//如何从第6个图,跳转到第一个图
			pic = 0; //先设置pic=0
			ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置
		}
		pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
		animate(ulObj, -pic * imgWidth); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
		//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
		if (pic == list.length - 1) {
			//第五个按钮颜色干掉
			olObj.children[olObj.children.length - 1].className = "";
			//第一个按钮颜色设置上
			olObj.children[0].className = "current";
		} else {
			//干掉所有的小按钮的背景颜色
			for (var i = 0; i < olObj.children.length; i++) {
				olObj.children[i].removeAttribute("class");
			}
			olObj.children[pic].className = "current";
		}

	};
	//左边按钮
	my$("left").onclick = function() {
		if (pic == 0) {
			pic = 5;
			ulObj.style.left = -pic * imgWidth + "px";
		}
		pic--;
		animate(ulObj, -pic * imgWidth);
		//设置小按钮的颜色---所有的小按钮干掉颜色
		for (var i = 0; i < olObj.children.length; i++) {
			olObj.children[i].removeAttribute("class");
		}
		//当前的pic索引对应的按钮设置颜色
		olObj.children[pic].className = "current";
	};

	//设置任意的一个元素,移动到指定的目标位置
	function animate(element, target) {
		clearInterval(element.timeId);
		//定时器的id值存储到对象的一个属性中
		element.timeId = setInterval(function() {
			//获取元素的当前的位置,数字类型
			var current = element.offsetLeft;
			//每次移动的距离
			var step = 10;
			step = current < target ? step : -step;
			//当前移动到位置
			current += step;
			if (Math.abs(current - target) > Math.abs(step)) {
				element.style.left = current + "px";
			} else {
				//清理定时器
				clearInterval(element.timeId);
				//直接到达目标
				element.style.left = target + "px";
			}
		}, 10);
	}
</script>

使用 swiper 插件实现自动轮播

1. 安装 swiper 包

先在命令行 cd 到项目中

cd 项目名

需要在后面加版本号

npm i swiper@3

在 package.json 中查看是否安装成功

2. 在页面中引入 swiper 代码

在 HTML 中引入代码

// 引入 css 样式
<link rel="stylesheet" href="./swiper-5.4.1/package/css/swiper.min.css">
// 引入 js 样式
<script src="./swiper-5.4.1/package/js/swiper.min.js"></script>

在 vue 中引入代码

import Swiper from "swiper";
import "swiper/css/swiper.min.css";

3. swiper 代码的使用

html 代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img
        src="https://img.js.design/assets/img/622ff0e327d2c84efaddac81.png"
      />
    </div>
    <div class="swiper-slide">
      <img
        src="https://img.js.design/assets/img/622ff0e327d2c84efaddac81.png"
      />
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
  //前进后退
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  //滚动条
  <div class="swiper-scrollbar"></div>
</div>

js 代码：

new Swiper(".swiper-container", {
  // 循环模式选项
  loop: true,
  // 自动播放
  autoplay: true,
  // 如果需要分页器
  pagination: {
    // 分页器与哪个标签关联
    el: ".swiper-pagination",
    // 分页器是否可以点击
    clickable: true,
    bulletClass: "my-bullt-class",
    bulletActiveClass: "my-bullet-active",
  },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

css 代码：

.swiper-container {
  margin: 0 0.15rem;
  margin-top: 0.12rem;
  border-radius: 0.08rem;
  box-shadow: 0px 0.03rem 0.06rem rgba(178, 178, 178, 0.63);
  .swiper-slide {
    height: 1.72rem;
    img {
      height: 1.72rem;
      border-radius: 0.08rem;
    }
  }
}

除此之外要是想要有更多的轮播图样式可以去swiper官网进行查阅：https://swiper.com.cn/

使用 element-ui 插件实现自动轮播

1. 安装 element-ui 插件

npm i element-ui

2. 在页面中引入 element-ui 插件

vue 中引入方法

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./assets/css/index.styl";
import "./assets/css/over-write.styl";
Vue.use(ElementUI);

html 中引入方法

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

具体代码在 element-ui 官网进行查阅：https://element.eleme.cn/#/zh-CN/component/carousel

---

以上就是 HTML 中实现自动轮播代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog