三种方法实现轮播图配置，史上最简方法~

源代码：

<div class="conscroll">
	<div class="caroubtn" @click="toleft">&lt;</div>
    <ul class="viewlist">
    	<li class="single" v-for="item in list" :key="item.id">
      		<h4 class="sub_title">
      			<i :class="item.iconName" style="margin-right:0.5rem"></i>
      			{{item.productName}}
        		<i class="el-icon-s-promotion" @click="handleCheck(item.id)"></i>
      		</h4>
      		<div class="cont">{{item.carouselContent}}</div>
		</li>
	</ul>
	<div class="caroubtn" @click="toright">&gt;</div>
</div>

.conscroll{
  	height:500px;
  	width: 100%;
  	margin: 20px;
  	display: flex;
  	.caroubtn{
   		width: 60px;
    	height: 60px;
    	line-height: 60px;
    	text-align: center;
    	border-radius: 50%;
    	background: #65C6D4;
    	margin: auto;
    	font-size: 2rem;
    	color: #fff;
    	cursor: pointer;
  	}
  	.viewlist{
    	display: flex;
    	margin: 0 auto;
    	overflow: hidden;
    	width: 1340px;	//260px * 5 + 10px * 4
    	.single{
      		width: 260px;
      		height: 100%;
      		margin-right: 10px;
      		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      		border-radius: 5px;
      		color: #fff;
      		padding: 10px;
      		&:nth-child(5n+1) {
        		background: linear-gradient(360deg, #FF8C6F 0%, #FF6773 100%);
      		}	
      		&:nth-child(5n+2) {
        		background: linear-gradient(360deg, #6962D2 0%, #A366A7 100%);
      		}
      		&:nth-child(5n+3) {
        		background: linear-gradient(360deg, #65C6D4 0%, #037EB7 100%);
      		}
      		&:nth-child(5n+4) {
        		background: linear-gradient(360deg, #9793E8 0%, #5149F9 100%);
      		}
      		&:nth-child(5n+5) {
        		background: linear-gradient(360deg, #35ACEC 0%, #1F8AF0 100%);
      		}
      		.sub_title{
      			height: 10%;
     			font-size: 14px;
     			.el-icon-s-promotion{
     				font-size: 16px;
        			float: right;
        			margin-right: 10px;
      			}
     		}
      		.cont{
      			height: 90%;
      			font-size: 10px;
        		font-weight: 400;
        		color: #FFF;
        		line-height: 20px;
        		overflow-y: scroll;
      		}
    	}
  	}
}

vue-seamless-scroll

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件，基于requestAnimationFrame实现，配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能。

• vue-seamless-scroll组件在线演示文档

• 安装：

  • Npm：npm install vue-seamless-scroll --save
  • Yarn：yarn add vue-seamless-scroll
  • 浏览器CDN：https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

• 使用：

  • 引入：import vueSeamlessScroll from 'vue-seamless-scroll'
  • 配置：components: { vueSeamlessScroll },
  • 使用：<vue-seamless-scroll></vue-seamless-scroll>

• 配置项：

属性	描述	默认值	数据类型
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	1.1.17版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

Carousel

Carousel 是Element.ui中的组件，可以在有限空间内，循环播放同一类型的图片、文字等内容。

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用：npm i element-ui -S

引入时只需要在项目的main.js文件中引入整个 Element即可（也可以按需引入，以减小项目体积）。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

官网：Carousel组件详细介绍

数组的增添和删除

每次点击轮播按钮时，只需要将数组中的元素调换位置即可，向左轮播时，将数组的第一个元素移除并添加到数组末尾；向右轮播时，将数组的最后一个元素移除并添加到数组开头。

toleft(){
	let list = this.list
	this.list.push(list.shift())
},
toright(){
	let list = this.list
	this.list.unshift(list.pop())
}

这个方法纯属取巧，但使用特别简便，对数组api不熟悉的同学可以看我的JavaScript学习笔记（六）-- 数组，希望对你有所帮助~