vue如何解决轮播图(Swiper)第一张图片一闪而过问题
更新时间：2023年01月13日 15:20:28 作者：李湘湘
这篇文章主要介绍了vue如何解决轮播图(Swiper)第一张图片一闪而过问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3 + Element Plus 实现表格全选/反选/禁用功能(示例详解)
本文详细介绍了如何使用Vue3组合式API和ElementPlus实现表格的全选/反选/禁用功能,并分享了分页保持、视觉提示优化、性能优化等技巧,同时,还提供了常见问题的解决方案和扩展思考,帮助开发者构建功能丰富且用户体验良好的表格组件,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了Vue中Element的table多选表格如何实现单选，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最近公司想重构一个项目,这里给大家总结下,这篇文章主要给大家介绍了关于vue3+ts+pinia+vant项目搭建的详细步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了windows下vue-cli及webpack搭建安装环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Vue中Pinia状态管理，Pinia开始于大概2019年，其目的是设计一个拥有 组合式 API 的 Vue 状态管理库，Pinia本质上依然是一个状态管理库，用于跨组件、页面进行状态共享，感兴趣的同学可以参考阅读2023-04-04
这篇文章主要介绍了.netcore+vue 实现压缩文件下载功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
今天小编就为大家分享一篇vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue input组件如何设置失焦与聚焦，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
element-ui el-upload实现上传文件及简单的上传文件格式验证功能
前端上传文件后,后端接受文件进行处理后直接返回处理后的文件,前端直接再将文件下载下来,下面这篇文章主要给大家介绍了关于element-ui el-upload实现上传文件及简单的上传文件格式验证功能的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中在echarts里设置的定时器清除不掉问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论