纯Vue.js 写的一个自动轮播 Banner 图片广告的小模块练练手

最新推荐文章于 2023-08-26 16:51:26 发布

djk8888

最新推荐文章于 2023-08-26 16:51:26 发布

阅读量1.3k

点赞数

分类专栏： vue.js html 文章标签： vue

本文链接：https://blog.csdn.net/djk8888/article/details/106425646

版权

html 同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

vue.js

10 篇文章 0 订阅

订阅专栏

自己写着玩练手用的...(＃°Д°)...

在线预览地址：http://djk8888.byethost32.com/banner/banner_vue.html （国外服务器图片加载速度忒慢 ...("▔□▔)...等30秒...）

HTML页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>banner for Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="css/banner_vue.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id='app'>
        <div class="banner">
            <img src="images/arr_l_w.png" class="arr_l" v-on:click="pervie" alt="">
            <a v-bind:href="linkArr[index]" target="_blank"><img v-bind:src="imgArr[index]" class="ban_img" alt=""></a>
            <img src="images/arr_r_w.png" class="arr_r" v-on:click="next" alt="">
            <div class="banner_page">
                <span v-bind:class="index == i ? 'current_page':''" v-for="(item,i) in imgArr"
                    v-on:click="click_banner(i)">{{i+1}}</span>
            </div>
        </div>
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "images/1.jpg",
                    "images/2.jpg",
                    "images/3.jpg",
                    "images/4.jpg",
                    "images/5.jpg",
                    // 图片理论上是可以无限加的
                ],
                linkArr: [
                    "https://www.sina.com.cn",
                    "https://www.sohu.com",
                    "http://www.ifeng.com",
                    "https://www.qq.com",
                    "https://www.163.com",
                    //跳转的路径数量要和图片数量保持一致
                ],
                index: 0,
            },
            created: function () {
                //启动自动轮播banner图...5秒一换（可根据需要调整banner轮播速度）
                window.setInterval(this.next, 5000);//1秒=1000*毫秒
            },
            methods: {
                next: function () {
                    //点击切换下一图：
                    if (this.index < this.imgArr.length - 1) {
                        this.index++;
                    }
                    else {
                        this.index = 0;//循环到第1图
                    }
                },
                pervie: function () {
                    //点击切换上一图：
                    if (this.index > 0) {
                        this.index--;
                    }
                    else {
                        this.index = this.imgArr.length - 1;
                    }
                },           
                click_banner: function (i) {
                    this.index = i;//点击跳转到指定的图
                },
            }

        });
    </script>
</body>

</html>

CSS文件：

@charset "utf-8";

/* banner图的长宽在这里设置 */

.ban_img {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: red;
}

/* 切换到上一张图的按钮 */

.arr_l {
    position: absolute;
    top: 120px;
    left: 20px;
    /*opacity: 0.0完全透明; 1.0完全不透明*/
    opacity: 0.0;
    z-index: 99;
}

.arr_l:hover {
    /*opacity: 0.0完全透明; 1.0完全不透明*/
    opacity: 1.0;
    /* filter: drop-shadow(#DCDCDC 0 0); */
}

/* 切换到下一张图的按钮 */

.arr_r {
    position: absolute;
    top: 120px;
    left: 525px;
    /*opacity: 0.0完全透明; 1.0完全不透明*/
    opacity: 0.0;
    z-index: 99;
}

.arr_r:hover {
    /*opacity: 0.0完全透明; 1.0完全不透明*/
    opacity: 1.0;
    /* filter: drop-shadow(#DCDCDC 0 0); */
}

/* banner图下方的页卡 */

.banner_page {
    position: absolute;
    top: 280px;
    left: 20px;
    /* left: 450px; */
}

.banner span {
    display: block;
    float: left;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    color: #808080;
    border: #808080 solid 1px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
}

.current_page {
    /* 当前banner页卡添加突出的背景色 */
    background-color: orangered;
    color: white !important;
}

● 自动轮播(5秒钟自动切换到下一张图，到最后一张自动切换到第一张)

● 点击banner图片两边的，左、右箭头，分别切换到：上一张、下一张（循环切换）

● 点击下方图片页卡切换到指定页的banner图片

在线预览地址：http://djk8888.byethost32.com/banner/banner_vue.html （国外服务器图片加载速度忒慢 ...("▔□▔)...等30秒...）

源码下载地址：https://download.csdn.net/download/djk8888/12474613