VUE自制轮播图（仿京粉轮播）

效果图如下所示

这里用到监听滑动组件（vue-touch)
文章地址：https://blog.csdn.net/qq_43764578/article/details/104709333

<template><div id="app" style="background-color: #f7f7f7;"><div class="indes"><v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright"><div v-for="(item,index) in detail" :class="'centerx curr'+curr[index]"><div class="center-imagex"><img :src="item.img" /></div><div class="center-ney"><div>{{item.name}}</div></div></div></v-touch></div></div>
</template><script>
import { getHomeData } from "@/api/public";
import dialog from "@/utils/dialog";//弹窗
export default {props: {msg: String},data() {return {detail:[{ img: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg', name:'测试内容1测试内容1测试内容1测试内容1测试内容1'},{ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'测试内容2测试内容2测试内容2测试内容2测试内容2'},{ img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'测试内容3测试内容3测试内容3测试内容3测试内容3'}],curr: [0, 1, 2],towards:'',interval:''}},mounted(){this.onshow();},methods: {onshow:function(e){let that = thisthat.interval = setInterval(function () {if (that.curr[0] == 0){that.curr = [2,0,1]} else if (that.curr[1] == 0){that.curr = [1,2,0]} else if (that.curr[2] == 0){that.curr = [0,1,2]}},3000)},swiperleft: function () {// 左划let that = thisclearInterval(that.interval)if (that.curr[0] == 0) {that.curr = [2, 0, 1]} else if (that.curr[1] == 0) {that.curr = [1, 2, 0]} else if (that.curr[2] == 0) {that.curr = [0, 1, 2]}this.onshow();},swiperright: function () {// 右滑let that = thisclearInterval(that.interval)if (that.curr[0] == 0) {that.curr = [1, 2, 0]} else if (that.curr[1] == 0) {that.curr = [0, 1, 2]} else if (that.curr[2] == 0) {that.curr = [2, 0, 1]}this.onshow();},},
}
</script>
<style>.indes{width: 100%;float: left;overflow: hidden;padding: 3%;background-color: #e54d42;position: relative;}.centerx{float: left;overflow: hidden;background-color: #fff;padding: 3%;border-radius: 0.1rem;transition: all 0.5s;}.center-imagex{width: 30%;height: 100%;float: left;}.center-imagex>img{width: 100%;height: 100%;}.center-ney{width: 70%;height: 100%;float: left;padding: 0 0 0 3%;font-size: 0.24rem;}.center-ney>div{width: 100%;float: left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}.curr2{width: 94%;height: 1.6rem;margin: 0.2rem 0;position: absolute;left: 3%;z-index: 1;opacity: 0.8;}.curr1{width: 91%;height: 1.8rem;margin: 0.1rem 0;position: absolute;left: 3%;z-index: 2;opacity: 0.9;}.curr0{width: 94%;height: 2rem;position: relative;left: 0;z-index: 3;}
</style>

有什么问题欢迎评论留言，我会及时回复你的

VUE自制轮播图（仿京粉轮播）相关推荐

微信小程序自制轮播图（仿京粉轮播）
效果图如下所示 .wxml <view class="index"><view class="center curr{{curr > index? ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
axure轮播图怎么设置循环轮播_Axure教程：轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
android轮播图实现方案,Android轮播图实现教程
ListView的headerView设置为轮播图之后结合上/下拉刷新/加载的模式成为现在大多数APP的一个必须具备的功能,对于许多初学者来说想要实现轮播图这样一个集线程睡眠.自动处理.替换过程中刷新 ...
【轮播图】使用bootstrap轮播插件（Carousel）
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.内容是足够灵活的,可以是图像.内嵌框架.视频或者其他想要放置的任何类型的内容. 源代码 <!DOCTYP ...
html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...
在html中轮播图怎么做,HTML轮播图怎么做
回答:基础准备工作 1.打开Axure,页面名称命名为"图片轮播":在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,在上方菜单栏将宽调整为400, ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...

VUE自制轮播图（仿京粉轮播）

VUE自制轮播图（仿京粉轮播）相关推荐

最新文章

热门文章