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() 中的路径即可。