1.最近项目中也是用到走马灯手动添加切换图片这个功能。
大家应该都知道当走马灯轮播前两张图片和后两张图片的轮播方向和后面图片的方向不一致，就很尴尬。在网上查阅了好多博客基本都是手动添加两张图片，比如：[1,2]改成[2,1,2,1]。在项目中我们显然不可能把数据写死，这是不现实的。
大致说下官方提供的方法：
<el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </el-carousel-item> </el-carousel>
// setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值 // prev 切换至上一张幻灯片 // next 切换至下一张幻灯片 // autoplay 是否自动切换 boolean — true // indicator-position 指示器的位置 string outside/none // direction 走马灯展示的方向 string horizontal/vertical horizontal
2.原生js-html封装轮播图
html部分
<div class="main w"> <div class="focus"> <!-- 左边按钮 --> <a href="#" class="arrow-left"><</a> <!-- 右边按钮 --> <a href="#" class="arrow-right">></a> <!-- 轮播图部分 --> <ul> <li> <a href="#"><img src="./img/focus.jpeg" alt=""></a> </li> <li> <a href="#"><img src="./img/focus1.jpeg" alt=""></a> </li> <li> <a href="#"><img src="./img/focus2.jpg" alt=""></a> </li> <!-- 这一张的作用是为了后面做无缝链接 --> <!-- <li> <a href="#"><img src="./img/focus.jpeg" alt=""></a> </li> --> </ul> <!-- 下面小圆点部分 --> <!-- <ol class="circle"> --> <!-- </ol> --> </div> </div>
css部分
<style> * { margin: 0; padding: 0; } a { text-decoration: none; } .w { overflow: hidden; position: relative; width: 720px; height: 187px; /* margin: 200px auto; */ } ul li { list-style: none; } .main .focus ul { position: absolute; left: 0; top: 0; width: 600%; } .main .focus ul li { float: left; } .main .focus ul li img { width: 720px; height: 187px } a[class^='arrow'] { /* 开始时隐藏箭头 */ display: block; z-index: 1; position: absolute; cursor: pointer; width: 30px; height: 50px; color: #fff; text-align: center; line-height: 50px; font-weight: 700; background-color: rgba(0, 0, 0, .3); } .arrow-left { left: 0; top: 50%; transform: translateY(-50%); } .arrow-right { right: 0; top: 50%; transform: translateY(-50%); } </style>
js部分：
<script> // 滑动函数 function moves (obj, target, callback) { window.clearInterval(obj.timer); obj.timer = window.setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { window.clearInterval(obj.timer); if (callback) { callback(); } } else { obj.style.left = obj.offsetLeft + step + 'px'; } }, 15) } // 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏 var focusing = document.querySelector('.focus'); // 获取左箭头 var arrowleft = document.querySelector('.arrow-left'); // 获取右箭头 var arrowright = document.querySelector('.arrow-right'); var ul = document.querySelector('ul'); console.log(ul.children.length); // 获得图片张数 var len = ul.children.length; // 收移动到focus的时候显示箭头 // focusing.addEventListener('mouseenter', function () { // arrowleft.style.display = 'block'; // arrowright.style.display = 'block'; // }) // // 鼠标离开又隐藏 // focusing.addEventListener('mouseleave', function () { // arrowleft.style.display = 'none'; // arrowright.style.display = 'none'; // }) // 点击右边箭头 设置一个num进行移动距离 var num = 0; arrowright.addEventListener('click', function () { console.log("1111111111111111"); if (num == len - 1) { ul.style.left = 0; num = 0; } num++; moves(ul, -num * ul.children[0].offsetWidth); }) // 点击左边箭头 arrowleft.addEventListener('click', function () { if (num == 0) { num = len - 1; ul.style.left = -num * ul.children[0].offsetWidth; } num--; moves(ul, -num * ul.children[0].offsetWidth); }) </script>
3.使用swiper组件（推荐）
swiper官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
有几个注意事项：vue2.0项目应该使用swiper5
//导入js import Swiper from "swiper"; //引入css import "swiper/css/swiper.min.css";
然后根据自己需求结合官网搞里头就行了
