vue实现轮播图（淡入淡出呼吸效果）

Vue简简单单实现淡入淡出轮播图效果，不依赖任何第三方插件或组件，开箱即用，欢迎C+V。

主页里还有无缝滚动、跑马灯轮播图，地址如下：https://blog.csdn.net/m0_59224033/article/details/126675569?spm=1001.2014.3001.5501

<template><div id="app"><div class="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')"><!-- 图片 --><img :class="['imgCss',ShowImg==index?'ShowCss':'']":src="item.imgUrl" v-for="(item,index) in imgList" :key="index" /><!-- 左箭头按钮 --><div class="leftBtn" @click="throttle(PrevFun)">&larr;</div><!-- 右箭头按钮 --><div class="rightBtn" @click="throttle(NextFun)">&rarr;</div><!-- 下方指示点容器 --><div class="instBox"><div v-for="(item,index) in imgList.length" :key="index"@click="ShowImg=index" :class="['inst',ShowImg==index?'instActv':'']"></div></div></div></div>
</template>

<script>export default {components: {},data() {return {imgList: [{imgUrl: "https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg"},{imgUrl: "https://img12.360buyimg.com/pop/s590x470_jfs/t1/204028/36/25480/101429/62f507a7Ec62b0cd3/db5984ae24ce0212.jpg"},{imgUrl: "https://imgcps.jd.com/ling4/100022552927/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e6/075268d0/cr/s/q.jpg"},{imgUrl: "https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e3/d7b3695b/cr/s/q.jpg"},{imgUrl: "https://img30.360buyimg.com/pop/s590x470_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg"}],ShowImg:0,  // 表示当前显示的图片flag:true, // 用来节流防止重复点击start:null, // 自动执行下一张定时器};},mounted() {this.setTimeoFun()},methods: {// 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播MouseFun(type){// 停止定时器            // 重新执行定时器type=='移入'?clearTimeout(this.start):this.setTimeoFun()},setTimeoFun(){this.start = setInterval(()=>{this.NextFun()},1500)},// 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果throttle(fun) {if (this.flag) {this.flag = false;fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数setTimeout(() => {this.flag = true;}, 1200); // 节流间隔时间}},// 上一张PrevFun(){if(this.ShowImg!==0){this.ShowImg--}else{this.ShowImg=this.imgList.length-1}},// 下一张NextFun(){if(this.ShowImg!==this.imgList.length-1){this.ShowImg++}else{this.ShowImg=0}},}};
</script>

<style>/* 图片容器样式 */.SwiperBox {position: relative;width: 500px;height: 300px;border: 1px solid #ccc;box-sizing: border-box;cursor: pointer;}/* 图片默认样式 */.imgCss {position: absolute;left: 0px;top: 0px;width: 500px;height: 300px;opacity: 0;transition: 0.8s;  /* 淡入淡出过渡时间 */}/* 图片选中样式(继承上方默认样式) */.ShowCss {opacity: 1;}/* 两个按钮共有的样式,也可直接使用箭头图片替代 */.leftBtn,.rightBtn {position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;background: rgba(109, 109, 109, 0.445);color: #fff;border-radius: 50%;cursor: pointer;font-size: 12px;font-weight: 500;}.leftBtn {left: 10px;}.rightBtn {right: 10px;}/* 下方指示器盒子 */.instBox{position: absolute;left: 50%;transform: translateX(-50%);bottom: 10px;display: flex;}/* 小圆点 */.inst{width: 10px;height: 10px;border: 1px solid #ccc;margin-right: 8px;background: #fff;border-radius: 50%;cursor: pointer;}.inst:last-child{margin-right: 0px;}.instActv{border: 1px solid #ff0000;background: #ff0000;}#app{width: 100%;padding: 120px;display: flex;justify-content: center;}
</style>

vue实现轮播图（淡入淡出呼吸效果）相关推荐

jQuery轮播图淡入淡出
效果:实现自动切换,点击停止,左右点击切换,底部圆点切换 HTML <body><div id="box"><div class="imgs ...
html轮播图淡入淡出,一个简洁的Jquery效果 banner轮播（1）淡入淡出效果
朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超 ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
vue实现轮播图代码
这是一段简单的 Vue 实现轮播图的代码: <template><div><div class="carousel"><transitio ...
用vue做轮播图关于require的用法
一开始,我用html做的页面,头部是轮播图,效果很好. 页面展示图片如下: 代码如下: <!DOCTYPE html> <html lang="en">&l ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
vue实现轮播图（跑马灯、无缝滚动、无限切换效果）
Vue简简单单实现无缝滚动轮播图效果,不依赖任何第三方插件或组件,复制粘贴开箱即用,简简单单,干净卫生主页里还有淡入淡出轮播图,地址如下: https://blog.csdn.net/m0_5922 ...
Vue.js轮播图走马灯 (详解)
直接上代码: 轮播图1: html <template><div><div class="back_add"><div class=&qu ...
Vue层叠轮播图tantan-stack
首先npm install vue-tantan-stack --save 安装 vue-tantan-stack地址将包下载到本地,然后把文件放到项目中在文件中引入组件 stack(:pages ...

vue实现轮播图（淡入淡出呼吸效果）

vue实现轮播图（淡入淡出呼吸效果）相关推荐

最新文章

热门文章