b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）

2024-06-02 21:54:36

目录

目标效果：

重点原理：

1.用数组储存图片的数据

2.v-bind指令可以设置元素属性 e.g.src

语法 v-bind:属性名=表达式

简写【实际开发常用】 :属性名=表达式

3.v-show和v-if都可以切换元素的显示/隐藏状态

(1)频繁切换显示/隐藏的dom元素用 v-show

(2)不频繁切换显示/隐藏的dom元素用 v-if

实现步骤：

1.定义图片数组

2.添加图片索引

3.绑定src属性

4.图片切换逻辑/5.显示状态切换

代码部分：

1.图片切换.html(全是重点）

2.index.css(辅助作用）

3.vue.js(辅助作用）

安装Vue的方法 /获取vue.js文件的方法：编辑

目标效果：

1.点击右边按钮，是往右播放一张图片；点击左边按钮，是往左播放一张图片

2.在第一张图片的时候，不显示左按钮；在最后一张图片的时候，不显示右按钮

3.初始状态显示是第一张图片（在图片数组中index为0）

e.g.1初始效果，默认显示的是第一张图片：

e.g.2在默认显示的是第一张图片的基础上，点击右按钮一次，切换到第二张图片：

e.g.3一直点击右按钮，直到显示最后一张图片：

e.g.4在显示最后一张图片的基础上，点击左按钮，可以查看倒数第二张图片：

重点原理：

1.用数组储存图片的数据

e.g.

<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: {

prev: function () {//prev 切换到上一张图片

this.index--;//此处this指当前对象#mask

},

next: function () {//next 切换到下一张图片

this.index++;//此处this指当前对象#mask

}

}

})

</script>

2.v-bind指令可以设置元素属性 e.g.src

语法 v-bind:属性名=表达式

简写【实际开发常用】 :属性名=表达式

e.g.

：src=“...”是v-bind:src=”...”的简写，都可以给img元素添加src属性

3.v-show和v-if都可以切换元素的显示/隐藏状态

(1)频繁切换显示/隐藏的dom元素用 v-show

v-show=“表达式” 原理是【dom元素一直存在，只是修改display，对性能损耗小】

v-show=“false” 隐藏 dom元素加上了display:none

v-show=“true” 不隐藏

(2)不频繁切换显示/隐藏的dom元素用 v-if

v-if=“表达式” 原理是【新增/删除dom元素，对性能损耗大】

v-show=“false”,元素存在于dom树中(即该dom元素存在)

v-show=“false”,从dom树中移除(即该dom元素不存在)

实现步骤：

1.定义图片数组

用数组储存所有图片

2.添加图片索引

3.绑定src属性

4.图片切换逻辑/5.显示状态切换

代码部分：

1.图片切换.html(全是重点）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>图片切换</title><link rel="stylesheet" href="./css/index.css" />
</head><body><div id="mask"><div class="center"><h2 class="title"><img src="./images/logo.png" alt="">深圳创维校区环境</h2><!-- 图片 --><img :src="imgArr[index]" alt="" /><!-- 左箭头 --><!-- 此处切换左右箭头的显示/隐藏：v-if也可以实现一样的效果，但是由于v-if对性能消耗比v-show大，所以应该首选用v-show --><!-- v-show="index!=0"指： --><!-- (1)当index的值不等于0的时候，显示左箭头 --><!-- (2)当index的值等于0的时候，隐藏左箭头 --><a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left"><img src="./images/prev.png" alt="" /></a><!-- 右箭头 --><!-- v-show="index<imgArr.length-1"指： --><!-- index<imgArr.length-1=10-1=9,index索引是9的时候是最后一张图片 --><!-- (1)即最后一张图片之前，显示右箭头 --><!-- (2)到最后一张图片，隐藏右箭头 --><a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right"><img src="./images/next.png" alt="" /></a></div></div><script src="../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: {prev: function () {//prev 切换到上一张图片this.index--;//此处this指当前对象#mask},next: function () {//next 切换到下一张图片this.index++;//此处this指当前对象#mask}}})</script>
</body></html>

2.index.css(辅助作用）

* {margin: 0;padding: 0;
}html,
body,
#mask {width: 100%;height: 100%;
}#mask {background-color: #c9c9c9;position: relative;
}#mask .center {position: absolute;background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 10px;
}
#mask .center .title {position: absolute;display: flex;align-items: center;height: 56px;top: -61px;left: 0;padding: 5px;padding-left: 10px;padding-bottom: 0;color: rgba(175, 47, 47, 0.8);font-size: 26px;font-weight: normal;background-color: white;padding-right: 50px;z-index: 2;
}
#mask .center .title img {height: 40px;margin-right: 10px;
}#mask .center .title::before {content: "";position: absolute;width: 0;height: 0;border: 65px solid;border-color: transparent transparent white;top: -65px;right: -65px;z-index: 1;
}#mask .center > img {display: block;width: 700px;height: 458px;
}#mask .center a {text-decoration: none;width: 45px;height: 100px;position: absolute;top: 179px;vertical-align: middle;opacity: 0.5;
}
#mask .center a :hover {opacity: 0.8;
}#mask .center .left {left: 15px;text-align: left;padding-right: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;
}#mask .center .right {right: 15px;text-align: right;padding-left: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;
}

3.vue.js(辅助作用）

因为该文件内容太多，请前往该网址（Vue官网）下载

安装 — Vue.js

安装Vue的方法 /获取vue.js文件的方法：

b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）相关推荐

b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...
b站黑马的Vue快速入门案例代码——小黑记事本
目录目标效果: 重点原理: (1)push()方法--向数组末尾,添加新元素,并返回新长度 (2)v-on可以传递自定义参数,v-on:click="..."的简写是@click ...
b站黑马的Vue快速入门案例代码——计数器
目录目标效果: 重点原理: 1.创建Vue实例的时候: 2.v-on--为元素绑定事件 3.v-text--[解析文本用]设置标签的文本值 v-text[简写]为{{}} 实现步骤: 代码部分: 1 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
Vue实战篇二十七：实现走马灯效果的商品轮播图
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
【数据分析】【MySQL】快速入门+案例+代码+命令整理+GIF实操演示
1.SQL的语句顺序(理论) SELECT [ALL|DISTINCT] <目标表达式>.... FROM <表名或者视图名>.. [WHERE <条件表达式>] ...
Vue基础入门小demo——图片切换（初阶）
文章目录
vue使用设置背景图片的方式实现淡入淡出轮播图2
首先放一份,我调试完美运行的代码: <!DOCTYPE html> <html><head><meta charset="utf-8"&g ...

最新文章

热门文章