Hexo / icarus主题
7 分钟 读完 (大约 1088 个字)

Hexo Icarus 主题首页添加走马灯效果

昨天有朋友在我的博客留言问怎么实现我博客首页的走马灯效果，后来留言索要我的博客首页的走马灯效果的源码，事后我想了一下索性整理并分享出来吧。

首页添加走马灯图片轮播

下面分步骤来说明并贴出源码：

第一步：打开文件 themes/icarus/layout/index.ejs 修改如下：

1
2
3
4
5
6
7
8
9
<%- _css('css/main_banner') %>
<div id='banner' class='card'></div>
<%- _js('js/main_banner', true) %>
<% page.posts.each(function(post){ %>
    <%- partial('common/article', { post, index: true }) %>
<% }); %>
<% if (page.total > 1) { %>
    <%- partial('common/paginator') %>
<% } %>

注意上面的前三行代码是新增的代码。

第二步：添加 CSS 样式，打开文件 themes/icarus/source/css 目录，在该目录新建文件 main_banner.css 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/* 公共样式 */
#banner {
    margin-bottom: 1rem;
}
#banner .pull-left{
    float: left!important;
}
#banner .pull-right{
    float: right!important;
}
#banner .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
#banner .clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
#banner .clearfix { display: block; }
/* close commented backslash hack */
#banner ul,li{
    margin:0;
    padding:0;
    list-style-type: none;
}

/* 轮播图插件样式 */
#banner .carousel-box{
    position: relative;
    width:100%;
}
#banner .transverse-box{
    position: relative;
    width:66.7%;
}
#banner .img-item{
    position: absolute;
    top:0;
    left:0;
    z-index: 0;
}
#banner .vertical-box{
    position: relative;
    width:33.3%;
}
#banner .vertical-box ul{
    overflow: hidden;
}
#banner .img-item{
    transition: width 1s;
}
#banner .img-item img{
    width:100%;
    height:100%;
}
#banner .vertical-box ul li{
    font-size: 0;
}
#banner .vertical-box ul li img{
    width:100%;
    height:100%;
}
#banner .left-arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:50%;
    left:0px;
    color:#fff;
    margin-top:-35px;
    font-size: 50px;
    font-weight: 200;
    text-align: center;
    line-height: 100px;
    width:50px;
    height:70px;
    background:rgba(0,0,0,0.6);
    cursor: pointer;
    z-index: 99;
}
#banner .right-arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:50%;
    right:0px;
    color:#fff;
    margin-top:-35px;
    font-size: 50px;
    font-weight: 200;
    text-align: center;
    line-height: 100px;
    width:50px;
    height:70px;
    background:rgba(0,0,0,0.6);
    cursor: pointer;
    z-index: 99;
}

第三步：添加 JavaScript 脚本，打开文件 themes/icarus/source/js 目录，在该目录新建文件 main_banner.js 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
var Carousel = function () {
};
Carousel.prototype = {
    //容器选择器
    container:"",
    //图片地址数组
    datas:null,
    autoplaySpeed:null,
    autoplay:false,
    // 初始化
    init:function(options){
        this.container = options.container;
        this.datas = options.datas;
        this.autoplaySpeed = options.autoplaySpeed;
        this.autoplay = options.autoplay;
        $(this.container).html("");
        this.createCarousel(options);
        this.arrowHover();
        this.tabImg();
        this.setZindex();
        //判断是否需要自动播放
        if(options.autoplay || this.autoplay == true){
            this.autoPlay(this.autoplaySpeed);
        }else{
            return;
        }
    },
    createCarousel:function(options){
        this.createDOM(this.container,options);
    },
    // 生成DOM
    createDOM:function(container,options){
        var html = "";
        html = "<div class='carousel-box clearfix'>"+
                    "<div class='transverse-box pull-left'>"+
                    "</div>"+
                    "<div class='vertical-box pull-right'>"+
                        "<ul>"+
                        "</ul>"+
                    "</div>"+
                    "<span class='left-arrow'>‹</span>"+
                    "<span class='right-arrow'>›</span>"+         
                "</div>";
        $(container).html(html);
        var imgLength = options.datas.length;
        for(var i = 0;i<imgLength;i++){
            $(".transverse-box").append("<div class='img-item'><a href='" + options.datas[i].url + "' target='_blank'><img src='" 
                + options.datas[i].img +"' url='" + options.datas[i].url + "' alt='" + options.datas[i].alt + "'></a></div>");
        };
        $(".vertical-box ul").append("<li><a href='" + options.datas[1].url + "' target='_blank'><img src='"+options.datas[1].img +"' alt='" + options.datas[1].alt + "'></a></li>");
        $(".vertical-box ul").append("<li><a href='" + options.datas[2].url + "' target='_blank'><img src='"+options.datas[2].img +"' alt='" + options.datas[2].alt + "'></a></li>");
    },
    arrowHover:function(){
        $(".carousel-box").hover(function(){
            $(".left-arrow,.right-arrow").css("display","flex");
        },function(){
            $(".left-arrow,.right-arrow").css("display","none");
        })
    },
    // 点击左右箭头触发翻页
    tabImg:function(){
        var obj = this;
        $(".left-arrow").on("click",function(){
           obj.changeZindex_add();
        })
        $(".right-arrow").on("click",function(){
            obj.changeZindex_sub();
         })
    },
    // 设置初始zindex
    setZindex:function(){
        //左侧横向TAB
        var imgNum = $(".transverse-box").find(".img-item").length;
        
        for(var i = 10000;i<imgNum;i++){
            $(".img-item").eq(i).css({
                "zIndex":i
            });
            $(".img-item").eq(i).attr("Zindex",i);
        }
    },
    //前翻
    changeZindex_add:function(){
        var imgNum = $(".transverse-box").find(".img-item").length;
        var lastZindex =   $(".transverse-box").find(".img-item").eq(length-1).attr("zindex");
        var firstImg = $(".transverse-box").find(".img-item").eq(0).find("img");
        var firstImgSrc =  firstImg.attr("src");
        var firstImgAlt =  firstImg.attr("alt");
        var firstImgUrl =  firstImg.attr("url");
        var l1Img = $(".transverse-box").find(".img-item").eq(length-1).find("img");
        var lastImgSrc =  l1Img.attr("src");
        var lastImgUrl = l1Img.attr("url");
        var l2Img = $(".transverse-box").find(".img-item").eq(length-2).find("img");
        var last2ImgSrc = l2Img.attr("src");
        var last2ImgUrl = l2Img.attr("url");
        $(".transverse-box").find(".img-item").eq(0).remove();
        $(".transverse-box").append("<div class='img-item' zindex='"+(parseInt(lastZindex)+1)+"'><a href='" + firstImgUrl 
            + "' target='_blank'><img src='"+firstImgSrc+"' alt='" + firstImgAlt + "' url='" + firstImgUrl + "'></a><div>");
        $(".vertical-box ul").find("li").eq(0).find("img").attr("src",lastImgSrc);
        $(".vertical-box ul").find("li").eq(0).find("a").attr("href",lastImgUrl);
        $(".vertical-box ul").find("li").eq(1).find("img").attr("src",last2ImgSrc);
        $(".vertical-box ul").find("li").eq(1).find("a").attr("href",last2ImgUrl);
        $(".transverse-box").find(".img-item").eq(length-1).css({
            "zIndex":parseInt(lastZindex)+1,
            "opacity":0
        },500);    
        $(".transverse-box").find(".img-item").eq(length-1).animate({
            "opacity":1
        },500);

    },
    // 后翻
    changeZindex_sub:function(){
        var imgNum = $(".transverse-box").find(".img-item").length;
        var lastZindex = $(".transverse-box").find(".img-item").eq(length-1).attr("zindex");
        var firstZindex = $(".transverse-box").find(".img-item").eq(0).attr("zindex");
        var lastImg = $(".transverse-box").find(".img-item").eq(length-1).find("img");
        var lastImgSrc = lastImg.attr("src");
        var lastImgAlt = lastImg.attr("alt");
        var lastImgUrl = lastImg.attr("url");
        var f1Img = $(".transverse-box").find(".img-item").eq(0).find("img");
        var firstImgSrc = f1Img.attr("src");
        var firstImgUrl = f1Img.attr("url");
        var f2Img = $(".transverse-box").find(".img-item").eq(1).find("img");
        var first2ImgSrc = f2Img.attr("src");
        var first2ImgUrl = f2Img.attr("url");
        $(".transverse-box").find(".img-item").eq(length-1).remove();
        $(".transverse-box").prepend("<div class='img-item' zindex='"+(parseInt(firstZindex)-1)+"'><a href='" + lastImgUrl 
            + "' target='_blank'><img src='"+lastImgSrc+"' alt='" + lastImgAlt + "' url='" + lastImgUrl + "'></a><div>");
        $(".vertical-box ul").find("li").eq(0).find("img").attr("src",firstImgSrc);
        $(".vertical-box ul").find("li").eq(0).find("a").attr("href",firstImgUrl);
        $(".vertical-box ul").find("li").eq(1).find("img").attr("src",first2ImgSrc);
        $(".vertical-box ul").find("li").eq(1).find("a").attr("href",first2ImgUrl);
        $(".transverse-box").find(".img-item").eq(0).css({
            "zIndex":parseInt(firstZindex)-1
        }).siblings().css("opacity","0");
        $(".transverse-box").find(".img-item").eq(length-1).animate({
            "opacity":1
        }); 

        
    },
    // 自动播放
    autoPlay:function(x){
        var obj = this;
        this.changeZindex_add();
        setTimeout(function(){obj.autoPlay(x)},x);
    }
}

$(document).ready(function () {
    $.getJSON("./json-data/main-banner.json", function (data) {
        var banner = new Carousel();
        //图片地址数组。不要少于三张
        var imgSrcDate = data;
        banner.init({
            container:"#banner",
            datas:imgSrcDate,
            autoplaySpeed:8000,
            autoplay: true
        });
    })
})

第四步： 注意上面 javascript 中的 $.getJSON() 中的 json 文件路径，我当前在我的博客的 source/json-data 目录下新建了一个 main-banner.json 文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
[
    {
        "img" : "", 
        "url" : "",
        "alt" : ""
    },
    {
        "img" : "", 
        "url" : "",
        "alt" : ""
    }
]

上面的 img 就是轮播图的图片地址， url 是点击图片跳转的路径，alt 是图片的提示文字， 当然你也可以更改上面的 json 文件的存放位置，只需要修改 $.getJSON() 中的路径即可。

# Hexo, icarus主题, 图片轮播, 走马灯

喜欢这篇文章？打赏一下作者吧

精通Git--进阶
Android内部分享[4]——Intent 和 Intent 过滤器

评论

链接

我的虚拟出版

Android内部分享

（2019年） 程序员出版社

JavaScript 面向对象

（2018年） 程序员出版社

Python 最佳实践

（2017年） 程序员出版社

HTML+CSS基础

（2016年） 程序员出版社

最新文章

分类

标签云

3D Adapter Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout AsyncTask Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK CSS Camera Raw Canvas Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Elements Error Exception Extensions File FileProvider FileSave Flow Fresco GCC Git Git flow GitHub GitLab Github flow Gitlab flow Glide Gradle GrideView Groovy HTML HTML5 Handler HandlerThread Hexo Hilo Hybrid I/O IDEA IO ImageMagick ImageView IntelliJ Intellij Intent Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux ListView Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO Next Nodejs ObjectAnimator Okhttp Oracle VM Permission PhotoShop Physics Process Python RGB RS-232 RTU RecyclerView Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SQLite SSH SharePreference Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue CLI Vue.js Web WebGL Web前端 Workbench Zdog api apk axios background blur bookmark by关键字 cli compileOnly component computed css css3 c语言 databases demo flex flexbox flow gradient hexo hotfix html iOS icarus icarus主题 implementation init jQuery javascript launchModel linear logo merge methods mvp offset photos pug query radial rxjava2 scss servlet shell slot slot-scope svg tkinter tomcat transition unicode utf-8 v-slot vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 书籍 事件 享元模式 亮度 仓库 代理模式 位运算 依赖注入 修改，tables 光和色 入坑 入门视频教程 全套视频教程 内存 内核 内部分享 函数 函数式编程 分支 分析 列表 创建 删除 动画 单例模式 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图形图像 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 对比度 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工作流 工具 工厂模式 年终总结 开发技巧 开发流程 异常 弱引用 思想 恒星 打包 扫盲 技巧 指令 指针 接口 插件 插值 插槽 摄影 操作系统 攻略 故事 数据存储 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 最佳实践 服务 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 混合模式 渐变 渲染 游戏 源码 源码分析 滤镜 瀑布流 灰度 热修复 版本 版本回退 版本控制 状态栏 状态模式 生活 界面 留言板 直方图 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统广播 系统概述 系统，发行版， GNU 索引 组件 组合模式 绑定 结构 结构体 编码 编程 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 背景 背景混合 脚手架 膨胀的宇宙 自学Android 自定义 自定义View 自定义插件 色调 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 视频教程 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 走马灯 转换 软件工程 软引用 过滤器 运算符 进程 迭代子模式 适配器 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 饱和度 高斯模糊 黑洞

归档

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×