Vue实现轮播的方法

Vue实现轮播的方法
1.定义图片数组
2.添加图片索引
3.绑定src属性（v-bind）
4.图片切换逻辑
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="./index.css"/><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片切换</title>
</head>
<body><div id="mask"><div class="center"><h2 class="title">1117</h2><!-- 图片 --><img id="img1" :src="imgArr[index]" alt="" /><!-- <button @click="prev">上一张</button><button @click="next">下一张</button> --><!-- 左箭头 --><a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left"><img id="img2" src="data:image/left.png" alt="" /></a><!-- 右箭头 --><a href="javascript:void(0)" v-show="index<imgArr.length-1"@click="next" class="right"><img id="img3" src="data:image/right.png" alt="" /></a></div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el:"#mask",data:{imgArr:["image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg",],index: 0},methods: {prev() {this.index--;},next:function(){this.index++;}}});</script></body>
</html>

css代码简单实现功能多担待

Vue实现轮播的方法相关推荐

php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
php网页轮播图,JavaScript_JavaScript实现图片轮播的方法，本文实例讲述了JavaScript实现图 - phpStudy...
JavaScript实现图片轮播的方法本文实例讲述了JavaScript实现图片轮播的方法.分享给大家供大家参考.具体如下: 这里没有使用到JQUERY,没有过渡效果,图片可自行替换 . test2 ...
dedecms网站轮播本地显示为什么上传到服务器就不显示了,dedecms后台上传图片实现图片轮播的方法...
dedecms后台上传图片实现图片轮播的方法发布时间:2020-09-15 11:55:13 来源:亿速云阅读:110 作者:小新 dedecms后台上传图片实现图片轮播的方法?这个问题可能是我们 ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）
Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法) echarts-auto-tooltip使用方法: //引入echarts-auto-tooltip.js ...
vue实现轮播图代码
这是一段简单的 Vue 实现轮播图的代码: <template><div><div class="carousel"><transitio ...
用vue做轮播图关于require的用法
一开始,我用html做的页面,头部是轮播图,效果很好. 页面展示图片如下: 代码如下: <!DOCTYPE html> <html lang="en">&l ...
vue+elementUI轮播视频
轮播时自动暂停/继续播放 elementUI <el-carousel :interval="4000" type="card" height=" ...

Vue实现轮播的方法

Vue实现轮播的方法相关推荐

最新文章

热门文章