vue实现轮播图（跑马灯、无缝滚动、无限切换效果）

Vue简简单单实现无缝滚动轮播图效果，不依赖任何第三方插件或组件，复制粘贴开箱即用，简简单单，干净卫生

主页里还有淡入淡出轮播图，地址如下：

https://blog.csdn.net/m0_59224033/article/details/126490418?spm=1001.2014.3001.5502

还有分组轮播（一排放5个小的），地址如下：

http://t.csdn.cn/JmNUf

<template><div id="app"><div class="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')"><!-- 图片 --><div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}"><img :src="item.imgUrl" v-for="(item,index) in imgList" :key="index" /><!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 --><img :src="imgList[0].imgUrl" alt=""></div><!-- 左箭头按钮 --><div class="leftBtn" @click="throttle(PrevFun)">&larr;</div><!-- 右箭头按钮 --><div class="rightBtn" @click="throttle(NextFun)">&rarr;</div><!-- 下方指示点容器 --><div class="instBox"><div @click="instFun(index)" v-for="(item,index) in imgList.length" :key="index":class="['inst',index==imgShow?'instActv':'']"></div></div></div></div>
</template>

<script>export default {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"},],leftVal:0,  // 轮播图盒子的偏移值flag:true, // 用来节流防止重复点击start:null, // 自动执行下一张定的时器imgWidth:500,  // 在这里填写你需要的图片宽度ition:0.8, // 设置轮播图过度时间imgShow:0, // 表示当前显示的图片索引};},mounted() {this.奥力给() // 偷偷告诉大家一个小秘密,JavaScript是原生支持中文命名函数或变量的哦},methods: {// 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播MouseFun(type){// 停止定时器            // 重新执行定时器type=='移入'?clearTimeout(this.start):this.奥力给()},// 此为自动轮播定时器奥力给(){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.leftVal==0){ // 判断显示的图片 是 第一张时执行// this.imgList.length是指循环图片数组的图片个数this.ition=0 // 将过渡时间变成0，瞬间位移到最后一张图this.imgShow=this.imgList.length-1 // 将高亮小点改为最后一张图this.leftVal=(this.imgList.length)*this.imgWidth // 瞬间移动setTimeout(()=>{  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数this.ition=0.8this.leftVal -= this.imgWidth},this.ition*1000)}else{ // 判断显示的图片 不是 第一张时执行this.ition=0.8this.leftVal -= this.imgWidththis.imgShow--}},// 下一张NextFun(){if(this.leftVal==(this.imgList.length-1)*this.imgWidth){ // 判断显示的图片 是 最后一张时执行this.ition=0.8this.leftVal+=this.imgWidththis.imgShow=0setTimeout(()=>{this.ition=0this.leftVal=0},this.ition*1000)}else{ // 判断显示的图片 不是 最后一张时执行this.ition=0.8this.leftVal+=this.imgWidththis.imgShow++}},// 点击小圆点instFun(index){this.ition=0.8this.leftVal=index*this.imgWidththis.imgShow=index},}};
</script>

<style>/* 图片容器样式 */.SwiperBox {position: relative;width: 500px;height: 300px;box-sizing: border-box;cursor: pointer;overflow: hidden;}.imgBox{position: absolute;top: 0px;left: 0px;min-width: 500px;height: 300px;display: flex;justify-content: flex-start;}/* 图片默认样式 */.imgBox img {flex-shrink: 0;width: 500px;height: 300px;}/* 两个按钮共有的样式,也可直接使用箭头图片替代 */.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实现轮播图（跑马灯、无缝滚动、无限切换效果）相关推荐

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 ...
vue实现轮播图（淡入淡出呼吸效果）
Vue简简单单实现淡入淡出轮播图效果,不依赖任何第三方插件或组件,开箱即用,欢迎C+V. 主页里还有无缝滚动.跑马灯轮播图,地址如下:https://blog.csdn.net/m0_59224033 ...
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 ...
android轮播图简单实现（左右无限滑动,自动轮播）
直接上代码了,都有注释,原理很简单 public class MainActivity extends AppCompatActivity { private static final String ...
jquery实现轮播图，可点击左右切换
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理轮播图整体是放在u ...

vue实现轮播图（跑马灯、无缝滚动、无限切换效果）

vue实现轮播图（跑马灯、无缝滚动、无限切换效果）相关推荐

最新文章

热门文章