轮播图，用vue来写一个简单的轮播图

news2024/11/17 21:40:23

轮播图，用vue来写一个简单的轮播图

写的很简单，就是一个小练习，哈哈哈，下面的几张图分别是轮播图的第一张，中间图，最后一张的效果图。

在这里插入图片描述

使用了vue 中的属性绑定 v-bind ,v-show 以及事件监听 v-on 指令。

思路:
1.vue实例中声明一个data属性imgArr，用于存放每张轮播图的地址，
2.同时定义一个默认起始索引index=0,
3.然后给两边的箭头监听点击事件，
4.最后通过v-show判断一下第一张和最后一张就不再显示左右箭头即可。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue练习</title>
    <style>
        body{
            background-color: #eee;
        }
        #loopImg{
            width: 500px;
            height: 300px;
            margin: 25vh auto;
            border-radius: 8px;
            position: relative;
        }
        .image-box>img{
            height: 300px;
            width: 300px;
            border-radius: 10px;
            z-index: -1;
            left: 100px;
        }
        span>img{
            width: 95px;
            position: absolute;
        }
        .left{
            left: 0;
            top: 100px;
        }
        .right{
            right: 0;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="loopImg">
    	<!-- 左箭头 -->
        <span><img src="./link/left.png"  class="left" @click="prev" v-show="index!=0"></span>
        <span class="image-box">
            <img v-bind:src="imgArr[index]" >
        </span>
        <!-- 右箭头 -->
        <span ><img src="./link/right.png"  class="right" @click="next" v-show="index<imgArr.length-1"></span>
    </div>

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     
     <script>
         let app = new Vue({
             el: '#loopImg',
             data: {
             	 // 图片url 数组
                 imgArr:[
                    "/image/ys01.jpg",
                    "/image/ys02.jpg",
                    "/image/ys03.jpg",
                    "/image/ys04.jpg",
                    "/image/ys05.jpg",
                    "/image/ys06.jpg",
                    "/image/ys07.jpg",
                    "/image/ys08.jpg",
                    "/image/ys09.jpg",
                    "/image/ys10.jpg",
                    "/image/ys11.jpg",
                    "/image/ys12.jpg",
                    "/image/ys13.jpg",
                 ],
                 index:0  // 图片数组索引
             },
             methods: {
           		 // 前一张图片
                 prev:function(){
                    this.index--
                 },
                 // 下一张图片
                 next:function(){
                    this.index++
                 }
             }
         })
     </script>
</body>
</html>