vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)

很久之前写过一篇用js按钮实现切换图片效果。

现在用vue实现一个轮播图，可以实现点击按钮左右翻页、每隔两秒自动翻页、翻到最后一页自动返回第一页。

实现结果如下：

具体的实现逻辑如下面的代码所示，使用时需把图片数组里的图片替换为自己的图片即可。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>图片切换</title><link rel="stylesheet" href="./css/index.css" />
</head><body><div id="mask"><div class="center"><h2 class="title"><img src="./images/logo.gif" alt="">Vue轮播图</h2><!-- 图片 --><img :src="imgArr[index]" alt="" /><!-- 左箭头 --><a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left"><img src="./images/prev.png" alt="" /></a><!-- 右箭头 --><a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right"><img src="./images/next.png" alt="" /></a></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#mask",data: {imgArr: ["./images/00.jpg","./images/01.jpg","./images/02.jpg","./images/03.jpg","./images/04.jpg","./images/05.jpg","./images/06.jpg","./images/07.jpg","./images/08.jpg","./images/09.jpg","./images/10.jpg",],index: 0},methods: {fun:function(){//setInterval(函数体,时间)setInterval(this.next,2000)},prev:function(){this.index--;},next:function(){this.index++;if(this.index == this.imgArr.length){this.index = 0;}}},mounted:function(){    //生命周期  钩子函数   挂载完成this.fun()}})</script>
</body></html>

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简简单单实现无缝滚动轮播图效果,不依赖任何第三方插件或组件,复制粘贴开箱即用,简简单单,干净卫生主页里还有淡入淡出轮播图,地址如下: https://blog.csdn.net/m0_5922 ...
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 ...
怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
前端vue异形轮播图案例(带源码)
目录下载依赖挂载依赖源码效果如下最后下载依赖 npm install vue-awesome-swiper --save 挂载依赖全局挂载依赖main.js里面 import VueAw ...
vue各类轮播图大全
npm install vue-awesome-swiper --save https://www.npmjs.com/package/vue-awesome-swiper https://githu ...

vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)

vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)相关推荐

最新文章

热门文章