Vue实现可复用轮播组件的方法 Vue实现可复用轮播组件的方法

本文用vue简单的实现了一个轮播图的基础功能，并抽离出来作为一个公共组件，方便复用
html和js部分

css样式部分

@import url('//at.alicdn.com/t/font_1451815_senarwrqu6.css'); * {margin: 0; padding: 0; }.img-box {position: relative; margin: 0 auto; }.img-item {height: 100%; width: 100%; opacity: 0; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -5; text-align: center; }.img-item.active {z-index: 0; opacity: 1; transition: .3s; }.img-position {position: absolute; bottom: 5px; left: 50%; display: flex; transform: translate(-50%, 0); }.img-position-item {display: inline-block; width:10px; height:10px; box-sizing: border-box; cursor: pointer; }.img-position-item.circle {border-radius: 50%; border: 1px solid #606266; }.img-position-item.nums {width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; color: #606266; font-size:14px; }.img-position-item:hover, .img-position-item.active {border-color: #d1d2d3; color: #d1d2d3; transition: .3s; }.img-position-item + .img-position-item {margin-left: 10px; }.left-btn, .right-btn {position: absolute; top: 50%; bottom: 0; width: 20px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #d1d2d3; font-size: 20px; transform: translate(0, -50%); }.left-btn:hover, .right-btn:hover {color: #fff; transition: .3s; }.left-btn {left: 5px; }.right-btn {right: 5px; }

只是简单的实现了一个轮播图比较基础的部分，之前用原生写了一遍，现在用vue写一遍作为一个组件，也还不错。
【Vue实现可复用轮播组件的方法】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。