使用vue完成幻灯片操作

今天给大家分享一下如何用vue不使用组件完成幻灯片

为大家直接放上源代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>img {width: 500px;height: 350px;}.active {color: red;}#app>div {width: 500px;height: 350px;position: relative;}#app>div .mark {position: absolute;bottom: 10px;left: 45%;}#app>div a:nth-of-type(1) {position: absolute;top: 45%;left: 10px;}#app>div a:nth-of-type(2) {position: absolute;top: 45%;right: 10px;}</style></head><body><div id="app"><div @mouseover='stopInd' @mouseout='autoplay'><img :src="arrimg[current]" alt=""><div class="mark"><span :class="current===index?'active':''" v-for='(item,index) in arrimg.length'>{{item}}</span></div><a href="javascript:void(0);" @click='prepic'>&lt;</a><a href="javascript:void(0);" @click='nextpic'>&gt;</a></div></div><script src="./js/vue.js"></script><script>new Vue({el: '#app',data: {arrimg: ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp'],current: 0,//当前图片的下标ind:null //定时器id},mounted() {this.autoplay();},methods: {//自动播放autoplay() {// 此处必须是箭头函数，否则this指向windowthis.ind =setInterval(() => {this.current++;if (this.current >= this.arrimg.length) {this.current = 0;}},3000) },//停止播放stopInd(){clearInterval(this.ind)},//上一张prepic() {this.current--;if (this.current < 0) {this.current =this.arrimg.length-1;}},//下一张nextpic() {this.current++;if (this.current>=this.arrimg.length) {this.current =0;}}}})</script></body>
</html>

下面是效果图

大家使用之前记得要下载vue文件

使用vue完成幻灯片操作相关推荐

035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
广播计算机应用基础,2019年秋季考试《计算机应用基础》在线考核试题广播幻灯片操作应选择的功能区是...
2019年秋季考试<计算机应用基础>在线考核试题广播幻灯片操作应选择的功能区是 (12页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 14. ...
vue中获取/操作组件中的dom元素
最近刚做了一个项目,需要用到地图,选择的是腾讯地图,创建地图的时候,需要给地图创建函数中传入地图容器的id或者容器的dom元素,但是在调试过程中,发现怎么都无法获取dom元素,直接通过getEleme ...
vue 中哪些操作自动触发更新视图
vue 中哪些操作自动触发更新视图 vue数组对象修改触发视图更新直接修改数组元素是无法触发视图更新的,如 this.array[0] = {name: 'meng',age: 22 } 修改arr ...
计算机ppt操作知识,职称计算机知识：Powerpoint幻灯片操作
职称计算机知识:Powerpoint幻灯片操作导语:ppt幻灯片又称作正片,是一种底片或菲林.常见的规格有135和120两种.通常是彩色,但特殊目的也有黑白的正片.也可用来印相或放大相片. 第二章 ...
SpringBoot之Vue安装幻灯片插件
SpringBoot之Vue安装幻灯片插件前台项目使用了nuxt模板,但这个模板没有Element组件,所以需要引入 Nuxt官网 1.安装插件 npm install vue-awesome-sw ...
vue computed 中操作DOM和给对象添加属性遇到的问题
这两天使用vue做东西遇到一些问题,今天总结记录一下: 在computed中没法操作dom元素,比如 computed: {w() {return this.$refs.box.offsetWidth ...
springboot+vue实现分页操作
技术栈: springboot,vue,elementUI 实现效果后端首先我们需要封装一个包装类,来封装我们的分页数据,所以我在这里定义一个RespPageBean 包装类 package co ...
vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
使用vscode创建vue项目实践操作
前置操作: 打开vscode->终端->新建终端->进入你准备创建项目的目录,终端然后输入下面的指令: PS C:\Users\Administrator> cd C:\wor ...

使用vue完成幻灯片操作

使用vue完成幻灯片操作相关推荐

最新文章

热门文章