简单实现图片轮换

最新推荐文章于 2025-11-30 17:18:45 发布

原创最新推荐文章于 2025-11-30 17:18:45 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

该代码展示了一个使用Vue.js框架编写的图片轮播组件，包含上一张和下一张按钮，图片来源于深圳创维校区，样式由CSS进行美化，提供了基本的交互功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="mask">
        <div class="center">
            <h2 class="title"> <img src="./images/logo.png" alt=""> 深圳创维校区环境 </h2>
            <img :src="imgList[index]" alt="">
            <a 
            href="javascript:void(0)" 
            @click="prev" 
            class="left"
            v-show="index>0"
            >
                <img src="./images/prev.png" alt="">
            </a>
            <a 
            href="javascript:void(0)" 
            @click="next" 
            class="right"
            v-show="index<imgList.length-1"
            >
                <img src="./images/next.png" alt="">
            </a>
            
        </div>
    </div>
   
</body>
<script>
    const app = new Vue({
        el: "#mask",
        data: {
            imgList:[
            "./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(){
                this.index--;
            },
            next(){
                this.index++;
            }
        }
    });
</script>

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