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

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

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

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

<%- _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 内容如下：

/* 公共样式 */
#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 内容如下：

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 文件，文件内容如下：

[
    {
        "img" : "", 
        "url" : "",
        "alt" : ""
    },
    {
        "img" : "", 
        "url" : "",
        "alt" : ""
    }
]

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