Vue入门实战-轮播图切换

女爷i 2022-10-28 14:20 137阅读 0赞

## 效果图 ##

![在这里插入图片描述][20210206150456249.gif]

## 实现代码 ##

<!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">
            
            <img :src="imgList[imgIndex]" alt="" />
            
            <a href="javascript:void(0)" class="left" v-show="imgIndex>0" @click="prev" >
              <img src="./images/prev.png" alt="" />
            </a>
            
            <a href="javascript:void(0)" class="right" v-show="imgIndex<imgList.length-1" @click="next" >
              <img src="./images/next.png" alt="" />
            </a>
          </div>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script> var vue = new Vue({ el: "#mask", data: { // 图片数据源 imgList: [ "./images/00.jpg", "./images/01.jpg", "./images/02.jpg", ], // 当前图片的索引 imgIndex: 0, }, methods: { prev() { // 上一张图片按钮 if (this.imgIndex >= 0) { this.imgIndex--; } }, next() { // 下一张图片 if (this.imgIndex < this.imgList.length-1) { this.imgIndex++; } }, }, }); </script>
      </body>
    </html>

## 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;
    }

[20210206150456249.gif]: /images/20221024/1033d44f2aaa4365ab3ad8ae30e59e7c.png