vue_实现轮播图

预览：

思路：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuejs实现图片切换‘</title>
  <!-- 引入Vue开发版本的js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    #app{
        width: 640px;
        height: 320px;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }
    .center{
        width: 640px;
        height: 320px;
        overflow: hidden;
        position: absolute;
    }
    .center img{
        position: relative;
        width: 640px;
        height: 320px;
        float: left;

    }
    .center a{
        height: 55px;
        width: 15px;
    }
    .center a .aimg{
        width: 30px;
        height:70px;
        position: absolute;
        top: 42%;
        /*background-color: #2c3e50;*/
    }

    .center .right img{
        right: 5px;
    }
    .center .left img{
        left: 10px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="center">
<!--    <h2 class="title">
      <img src="./images/title.jpg" alt="">
      虎康建材公司
    </h2>-->
    <!--  图片-->
    <img :src="imgArr[index]" alt="">
    <!--  左箭头-->
    <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
      <img src="./images/prev.png" alt="" class="aimg">
<!--      &lt;-->
    </a>
    <!--  右箭头-->
    <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
      <img src="./images/next.png" alt="" class="aimg">
    </a>
  </div>



</div>
<script>
  var app = new Vue({
    el:"#app",
    data:{
      message:"",
    //  1、定义图片数组
      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",
      ],
    //  2、添加图片索引
      index:0,

    },
    methods:{
      prev:function (){
        this.index--;
      },
      next:function (){
        this.index++;
      }
    }

  })
</script>
</body>
</html>
posted @ 2022-01-19 22:28  博客zhu虎康  阅读(134)  评论(0)  编辑  收藏  举报