功能概要：
- 自动播放轮播图
- 点击左右移动轮播图
- 鼠标移入到标签上显示对应图片
- 移入停止轮播，左右按钮显示
- 移出左右按钮隐藏
效果图：
H5实现轮播图
原生 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"><</span><span id="right">></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 中实现自动轮播代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
