vue如何解决轮播图(Swiper)第一张图片一闪而过问题
目录
- vue轮播图(Swiper)第一张图片一闪而过
- 解决方式
- vue图片轮播实现过程
- 实现思路
- 总结
vue轮播图(Swiper)第一张图片一闪而过
解决方式
初始化(Swiper)时，外层添加一个定时器
代码：
setTimeout(function() {
var mySwiper = new Swiper($(el), {
autoplay: true,//可选选项，自动滑动
speed:500,//切换时间
loop : true,
pagination : pagination,
paginationType : paginationType,
// observer:true,
// observeParents:true,
// onSlideChangeStart: function(swiper){
// swiper.update();
// swiper.reLoop();
// },
prevButton: $(el).find('.swiper-button-prev'),
nextButton: $(el).find('.swiper-button-next'),
})
}, 500)
vue图片轮播实现过程
效果图：
由于没有素材就随便找了123456来代替选中的圆点。
实现思路
首先绑定数据源，循环出每个图片，在通过isShow字段来判断是否显示图片。在图片元素写这两个 v-bind:src="item.src" v-show="item.isShow" 一个src用来显示图片，show用来判断图片是否显示。
再为123456下面这个导航添加点击事件，通过点击的元素来设置该数据显示出图片，同时其他图片隐藏。
然后在vue created方法调用开始循环事件，来实现图片轮播。并用一个属性记录起来，方便后面停止循环。
开启轮播后，判断当前显示的图片是否是最后一张如果是就从1开始，如果不是则下标加+1去显示下一张图片。
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue轮播图</title>
</head>
<script src="vue.min.js"></script>
<script src="clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<style type="text/css">
#test{text-align: center;margin:0 auto;}
.baner{}
.baner img{width:700px;height: 500px;}
.num{margin-top: 20px}
.num a{color: black;}
.num a span{ margin-left: 30px;font-size: 20px; text-decoration:none;}
/*.num a:hover{color: red;}*/
.isSelect {color: red;}
</style>
<body>
<div id="test">
<h1>vue轮播图</h1>
<div class="baner">
<div class="banerimg" v-for="item in dataList">
<img v-bind:src="item.src" v-show="item.isShow">
</div>
<div class="num" @mouseover="focusImg()" @mouseout="startInterval">
<a href="javascript:void(0)" v-for="item in dataList" @click="changeImg(item.seq)">
<span :class={'isSelect':item.isShow}>{{item.seq}}</span>
</a>
</div>
</div>
</div>
</body>
<script >
new Vue({
el : "#test",
data: {
interval:'',
dataList:[
{name:'1',src:'banerSroll1.jpg',isShow:true,seq:1},
{name:'2',src:'banerSroll2.jpg',isShow:false,seq:2},
{name:'3',src:'banerSroll3.jpg',isShow:false,seq:3},
{name:'4',src:'banerSroll4.jpg',isShow:false,seq:4},
{name:'5',src:'banerSroll5.jpg',isShow:false,seq:5},
{name:'6',src:'banerSroll6.jpg',isShow:false,seq:6},
],
},
created:function(){
this.startInterval();
},
methods:{
changeImg :function(seq){
var newData = this.dataList;
for (var i = 0;i <newData.length; i++) {
if(newData[i].seq==seq)
newData[i].isShow=true;
else
newData[i].isShow=false;
}
this.dataList = newData;
},
startInterval:function(){
let that = this;
this.interval = setInterval(function(){
that.scollImg();
},1000)
},
scollImg:function(){
var newData = this.dataList.filter(function(val){return val.isShow})[0];
if(newData.seq==this.dataList.length){
this.changeImg(1);
}else{
this.changeImg(newData.seq+1);
}
},
focusImg :function(){
clearInterval(this.interval);
}
},
computed :function(){
}
})
</script>
</html>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue使用swiper插件实现轮播图的示例
hello大家好,最近我在做一个仿饿了么的项目,我会将我的项目经验同步到这里,与大家分享! vue - 使用swiper插件实现轮播图 下载安装: npm install swiper --save Msite.vue的HTML部分: <!--在页面msite_nav导航部分使用swiper--> <div class="swiper-container"> <div class="swiper-wrapper"> <div
-
vue使用swiper插件实现垂直轮播图
目录 使用swiper插件做垂直轮播图 swiper轮播插件使用 一次显示多个slides Swiper 动态加载数据遇到的坑 总结 使用swiper插件做垂直轮播图 1.下载安装 cnpm install swiper vue-awesome-swiper --save 2.main.js: import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import "swiper/swiper-bundle.m
-
vue修改swiper框架轮播图小圆点的样式不起作用的解决
目录 swiper框架轮播图小圆点样式不起作用 不要加 scoped swiper小圆点默认样式改变 swiper框架轮播图小圆点样式不起作用 不要加 scoped 下面是错误写法 <style scoped> .swiper-pagination-bullet-active { background: white; } </style> 正确写法 <style > .swiper-pagination-bullet-active { back
-
vue中使用swiper轮播图的正确姿势(亲测有效)
目录 前言 1.新建vue项目 2.装swiper的包 3.使用swiper 总结 前言 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的,吐槽完毕.假设你是个新手,我从新建项目开始跟你讲,以下是步骤. 1.新建vue项目 vue create 项目名 然后选最下面那一个(键盘上下键操作)然后回车 选择Bable,Router,Vuex,Css-Processords四个,其他的不要选中(空格键是选中和取消选中) 剩下的步骤按这张图来进行选择,然后项目就创建
-
Vue使用Swiper封装轮播图组件的方法详解
目录 Swiper 为什么要封装组件 开始封装 1.下载安装Swiper 2.引入css样式文件 3.引入js文件 4.把官网使用方法中的HTML结构复制粘贴过来 5.初始化Swiper 自定义效果 完整代码 效果展示 Swiper Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配. 官网地址:www.swiper.com.cn/ 目前最新版本是Swiper7,但众所周知最新版本通常不稳定,所以这里使用Swiper6来封装. Swiper各版本区别: 为什么要封
-
vue+rem自定义轮播图效果
使用vue+rem自定义轮播图的实现,供大家参考,具体内容如下 单位使用rem进行页面布局,在动态计算轮播图整体宽度时,需要把px转换成rem,挺麻烦的. 效果如下:如果当前图片不是第一张和最后一张,刚好可以看到当前图片上一张和下一张的一部分. 具体代码如下 <template> <div class="constructionUp"> <div class="pub-hd"> <h2>施工升级包</h2>
-
uniapp vue与nvue轮播图 轮播图组件
vue部分如下: <template> <view class=""> <!-- 轮播图组件 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular=""> <block v-for="(it
-
uniapp vue与nvue轮播图之轮播图组件的示例代码
vue部分如下: <template> <view class=""> <!-- 轮播图组件 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular=""> <block v-for="(it
-
微信小程序轮播图swiper代码详解
微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item}}" 报错不要管,不影响页面布局 <view class="container"> <swiper class="swiper1" indicator-dots="{{indicatorDots}}" 是否显示面板指示点
-
Vue 过渡实现轮播图效果
Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i
-
微信小程序 轮播图swiper详解及实例（源码下载）
微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码
-
Vue + ts实现轮播插件的示例
背景 最近在学习 ts,打算用 ts 写一个练手项目,参照的网站内容是 wanandroid,这个接触过android开发的同学可能更i了解一些,其实一开始是打算后台全部都自己写的,不过奈何一个懒字,所以现在的打算就是自己实现登录注册简单的逻辑.这些都不重要,一开始实现轮播是打算在 vue 中引入轮播图 swiper.js,后来想想还是自己写算了.也当作熟悉 ts.先上效果图(这里没有动态图片,各位同学可以自己实现) 代码已经上传 git,进度比较慢,如果可以各位大佬点个 star. githu
-
vue.js项目使用原生js实现移动端的轮播图
目录 前言 一.了解原生js移动端的事件 二.轮播图实战 第一部分:template模板 第一部分解读: 第二部分:script标签内代码 第二部分解读: 第三部分:css样式部分 三.效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接下来跟大家分享一下我的解决问题的过程. 一.了解原生js移动端的事件 原生js移动
-
用vue写一个仿简书的轮播图的示例代码
1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $
-
Vue手写横向轮播图的实例
目录 Vue手写横向轮播图 Vue常见的轮播图 Vue手写横向轮播图 前提:自己封装的轮播图,暂时没测出bug~ 效果如下图,一行三个,点击上一张/下一张 向前或向后移动一格,窗口缩放会适当变形,不影响切换 <template> <div class="swiper-template"> <div class="my-swiper-page"> <div class="page-left"> <