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

源代码：

<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.listthis.list.push(list.shift())
},
toright(){let list = this.listthis.list.unshift(list.pop())
}

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

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

三种方式实现轮播图功能
手动实现轮播图使用纯HTML.CSS.JavaScript实现轮播图功能. position 使用position的绝对定位与相对定位实现轮播图,首先将图片全部拼接成为一行,使用overflow: ...
用三种方式实现轮播图
轮播图的实现原理顾名思义,轮播图就是实现图片的轮换播放效果.先显示一张图片,一定的时间,让这张图片消失,下一张图片显示.让它们实现跟淘宝首页一样的广告轮播效果. 首先是前端html代码 <!D ...
两种方法实现轮播图效果
实现轮播图学习前端差不多两三个月,在这里记录分享一下.因本人菜鸟一枚,希望大佬们多多指点,勿喷. 通过计算每一张图片高度实现滑动轮播图 HTML代码: <div class="fat ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
24小时轮播怎么实现的_四种方式实现轮播图
不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式. 轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的 ...
html按钮轮播图,四种方式实现轮播图
不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式. 轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的 ...
html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...
Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...

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

vue-seamless-scroll

Carousel

数组的增添和删除

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

最新文章

热门文章