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

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

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

HTML页面：

    
    
    
    
    



    

        

            
            
            
            

                {{i+1}}
            
        
    
    

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