导读

Next主题确实是好用，但是中间还是有太多太多的坑，差点没把自己摔死。这个博客记录了完成背景图片轮播的博客，喜欢折腾的同学可以看看，这方面对CSS3的要求略微有点高。

Hexo的NexT主题非常简约，个性化调整也非常方便。在这里就给大家介绍Hexo的背景图片轮播的制作方法。

尴尬的开发条件

由于我还很菜，再加上电脑卡顿严重，有时候所有方法全部试了一遍都没有效果，重新创建一个工程就好了，也有时候重启就好了。这个背景图片轮播就是除了吃饭连续调了36个小时，最后重新新建一个项目就好了。这样的情况下调bug简直就是折磨。所以我基本上就用最小幅度的修改来保证需求的实现。

好了，来看看从入门到入土的全过程吧。我使用的是WebStorm作为IDE，其中内置的终端是可以操作的。如果没有WebStorm的话，可以使用git的Windows桌面版客户端自带的终端，即Git Bash，是个非常不错的终端，个人非常喜欢Vim风格。但是Windows自带的终端是不可以操作Hexo的，连PowerShell的管理员模式也不可以，这一点还请注意。

开发条件更新（2020年6月27日）

弱弱电脑泡水了，光荣牺牲。现在换了强强电脑，也就是现在的台式机，并且改用内存占用更少的VScode配合Git Bash分别完成编辑和部署。VScode中安装的插件就是markdown-all-in-one、GitLens和Language-Stylus，分别完成markdown编辑、GitHub部署和Stylus样式表三个部分。很可惜的是VScode自带的终端不能代替Git Bash，就有点不太方便。其他的都还可以。

开发条件又更新（2020年7月15日）

弱弱电脑换好了键盘，但是考虑到不怎么强的硬件，所以选择了Ubuntu系统，现在使用Ubuntu.20.04-desktop，VScode配合系统内置的git分别完成编辑和部署。使用的插件没有更改。

确定背景图片

我们先找好一个背景图片，就你啦。没错，博主是个不折不扣的死肥宅

然后把他放在背景图片中。由于夕立的图片从左到右对比度差异比较大，我准备加上透明度。透明度确实有很多种方法，我选了个对模板改动最小的方法：after伪类。于是，噩梦开始了。

写入样式表

在NexT模板里面，样式表大多是用styl文件存储的，简单地说，它是一种新语言，叫Stylus语言，基于nodejs，非常强大，补足了CSS3的许多缺点。

接着我们找到NexT模板中给我们预留的自定义样式文件中，也就是根目录下的：/themes/next/source/css/_custom/custom.styl，打开发现是个空的。

好了，写下我们的代码：（由于里面包含keyframe，就直接用CSS3全部写完了，没用上stylus）

/* * 在上层的body什么都不要写，因为body加上透明度opacity后文字也变得透明了* 于是所有的东西全部写在伪类，这里只保留最低限度的：层数（防遮盖）、位置（相对伪类的位置）*/
body {position : relative;z-index : 0;
}
/* * 在伪类中加上所有的属性*/
body:after {content : '';                 /* 伪类需要有内容，否则会变成0*0，无法显示效果 */width: 100%;                  /* 宽度拉满 */height: 100%;                 /* 高度拉满 */background-size: cover;       /* 背景图片铺满整个容器 */background-repeat: no-repeat; /* 不要重复 */opacity: 0.5;                 /* 透明度为50% */-moz-opacity: 0.5;            /* 火狐浏览器的透明度设置 */-khtml-opacity: 0.5;          /* safari浏览器的透明度设置，它使用了KDE的KHTML作为内核 */position: fixed;              /* 位置设为固定，否则往下滑背景图片就滑没了 */z-index: -1;                  /* 防遮罩 */top: 0;                       /* y坐标抵到浏览器顶部 */left: 0;                      /* x坐标抵到浏览器左侧 */
}

于是，就有了这样的效果：

看着好像还行？

编写js脚本

找到根目录下的/themes/next/source/js/src，在其中新建一个js文件。这里并没有给我们预留一个空文件，那就自己新建好了。我新建了custom.js文件。

严重警告：下面这个例子是我第一次的尝试，是错误的！

// 将所有的路径写下来
let imgUrl = ['/images/background/poi.png', // 舰娘夕立'/images/background/touhou-red.jpg' // 东方红魔馆
];
// 这里let类型是ECMA script6的特性
// 可以让我们把这个变量仅限于大括号内，可以组织非法访问带来的莫名其妙的问题
let imgIndex = 0; // 设置imgIndex来选择imgUrl中的字符串
// 设置计时器，每8秒换一次图片
/*** 这里用setInterval函数* 传递2个参数*   一个是执行的事件，也就是函数对象*       可以写好了再把方法名传进来，也可以直接在这里定义*   还有一个是中间等待的时间，也就是多长时间执行一次* 返回一个定时器对象，方便在需要删除该定时器的时候直接引用* 如果不删除定时器，这个定时器就会一直进行下去*/
let interval = setInterval(function() {// 1、获取需要变更的元素// 2、变更url$('body:after').css("background-image", "url('" + imgUrl[imgIndex] + "')");// 3、imgIndex自增，越界归零，也就是循环播放效果(imgIndex === imgUrl.length) ? (imgIndex = 0) : (imgIndex++)// 这个是唯一的三元运算符，可以叫做冒号运算符// 如果满足问号前的条件，就执行第二个括号里面的语句，否则执行第三个括号里面的语句。// 由于运算符有规定的优先顺序，所以这里不加括号也是完全OK的，只是为了让大家看得清楚才加上的
}, 8000);

最后，找到根目录下的/themes/next/layout/_custom/header.swig，这是个空文件。在里面引入jQuery和我们刚刚完成的js文件。

<!-- 这里是用的bootcdn中的jQuery镜像，可以加载得稍微快一点点，这一点点差别人类感觉不到就是了。 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 同样的，由于实在next模板内做的修改，src="/"访问的其实是根目录下的/themes/next，所以从/js/开始 -->
<script type="text/javascript" src="/js/src/custom.js"></script>

科普：swig简单的说就是一种超级强大的工具，基本上很多语言都支持，甚至可以用于汇编开发中。

好的！到这里就结束了！在WebStorm下方的Terminal（汉化了的同学这里叫做“终端”）输入hexo server，敲下回车就可以运行了。终端会弹出一大堆东西，其中有一句话是：“localhost:4000/”，点击就会自动呼出浏览器运行结果。

P.S. 会玩的同学可以在淘宝上购买一个超大号的回车键，每当这个时候就可以郑重地像按起爆器一样按下去，非常有仪式感。

发现问题

然后，什么效果都没有。

我慌了。

一开始我以为是url拼接的问题，调了很久很久，一直没成功。直到最后，我才明白：伪类after不可以被选中。

全部木大

上网一查，发现有一些方法，比如append一个新的style标签，这样子很难看清楚，也不容易编写。最后还是决定：把每一个图片定义成一个单独的CSS样式的类，然后每隔一段时间让body换个类。听着不难？试试吧。

再次修改

还是严重警告：下面的CSS部分是第二次尝试，还是略微有一点点问题，下方注释会标记有问题的地方

body, .pekora, .beaten, .collection, .touhou-red, .bang, .succubus, .poi {position : relative;z-index : 0;
}body:after,
.pekora:after, .touhou-red:after, .beaten:after, .collection:after, .bang:after, .succubus:after, .poi:after {content : '';width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;opacity: 0;-moz-opacity:0;-khtml-opacity: 0;position: fixed;z-index: -1;top: 0;left: 0;/* 加上动画 *//*** 我给animation传入的3个值分别是：*   - 动画名称 - bg-scale*   - 延迟时间 - 动画会持续8秒*   - 执行次数 - 无限执行：infinite*/animation : bg-scale 8s infinite;-webkit-animation : bg-scale 8s infinite;-moz-animation : bg-scale 8s infinite;-o-animation : bg-scale 8s infinite;
}/*** 大家完全可以复制粘贴，注意这下面的url要换成自己的图片路径。* 例如我将图片存在了根目录下的/themes/next/source/images/background/里面，所有的url就都这样配置了* 需要说明的是：这是在next模板中配置的，所以url("/")所访问的根目录是/themes/next/source/* 所以url就直接是省略了前面的，从/images/开始*/
/* hololive所属vtuber三期生：pekora，嚣张的兔子 */
.pekora:after {background-image : url("/images/background/pekora.jpg");
}
/* 东方红魔馆 */
/* 把body:after也设置了就是为了初始化* 这样一开始就是这个图片作为背景，* 也算是不动用重要模板文件的最小程度修改*/
body:after, .touhou-red:after {background-image : url("/images/background/touhou-red.jpg");
}
/* 将R16的百合图片中，攻的一方配上“现实”，受的一方配上“我”。看到这张图片的时候我的心情非常复杂 */
.beaten:after {background-image : url("/images/background/beaten.jpg");
}
/* 澡堂中的舰娘们 */
.collection:after {background-image : url("/images/background/collection.jpg");
}
/* 偶像大师（圣诞限定版） */
.bang:after {background-image : url("/images/background/bang.jpg");
}
/* 四只比基尼魅魔，是《魅魔和社畜》的作者所作，没有下海（一直在反复横跳就是了），不过老师的狗粮真的很美味 */
.succubus:after {background-image : url("/images/background/succubus.jpg");
}
/* 舰娘夕立 */
.poi:after {background-image : url("/images/background/poi.png");
}
/* 最后再加上切换的动画 */
/*** 这是一个叫做bg-scale的动画* 其实原本是有scale这个缩放的动作的* 但是违和感太强烈了删掉了* 结果这个莫名其妙的名字没改* 因为影响不大就算了吧！诶嘿~⭐* 大家可以在这其中加入自定义的动作* 尤其注意scale（缩放）和translate（平移）混用的时候scale应当在前面*//***  注意：这个动画设置略微有一点点误差。*       后面有修改版本，请不要复制这里的动画设置*/
@keyframes bg-scale {/* 最开始的状态 */0% {opacity : 0;transform : translateY(-3%) ;}/*** 经历1/5的时间到这一步* 完成的事件：*   - 透明度增加到50%*   - 从上方3%的地方移到了正中间（浏览器y轴朝下）*/20% {opacity : 50%;transform: translateY(0);}/*** 经历3/5的时间到这一步* 完成的事件：*   - 什么都没变*/80% {opacity : 50%;transform: translateY(0);}/*** 最后1/5的时间到这一步* 完成的事件：*   - 透明度变为0%（完全看不见）*   - 从正中间平移到下方3%的地方*/100% {opacity : 0;transform: translateY(3%);}
}
/* 下面都是针对各种浏览器的特化，意义是一样的 */
@-webkit-keyframes bg-scale{0% {opacity : 0;-webkit-transform : translateY(-3%) ;}20% {opacity : 50%;-webkit-transform: translateY(0);}80% {opacity : 50%;-webkit-transform: translateY(0);}100% {opacity : 0;-webkit-transform: translateY(3%);}
}@-moz-keyframes bg-scale{0% {-moz-opacity : 0;-moz-transform : translateY(-3%) ;}20% {-moz-opacity : 50%;-moz-transform: translateY(0);}80% {-moz-opacity : 50%;-moz-transform: translateY(0);}100% {-moz-opacity : 0;-moz-transform: translateY(3%);}
}@-o-keyframes bg-scale{0% {opacity : 0;-o-transform : translateY(-3%) ;}20% {opacity : 50%;-o-transform: translateY(0);}80% {opacity : 50%;-o-transform: translateY(0);}100% {opacity : 0;-o-transform: translateY(3%);}
}

终于，背景动了。wdnmd！

最后加上js脚本（custom.js）

// 这是jQuery的写法，意思是一打开这页面就这么做
$(document).ready(function () {// 先准备好和类名一样的字符串数组let IMG_CLASS = ["touhou-red", "poi", "beaten", "collection", "pekora", "succubus", "bang"];// 再准备一个索引let imgIndex = 0;/** 还需要一个计时器* 这个计时器传入了两个参数*   - 第一个表示需要重复的动作*   - 第二个表示下一次动作的延迟时间*/let interval = setInterval(function () {// 删除上一个类名（如果本身就没有这个类名也不会报错）$("body").removeClass(IMG_CLASS[imgIndex]);// 索引 + 1imgIndex++;// 当越界的时候归零，变成循环展示图片if (imgIndex == IMG_CLASS.length) {imgIndex = 0;}// 加上当前索引所指向的类名$("body").addClass(IMG_CLASS[imgIndex]);}, 8000); // 每8000毫秒，也就是8秒执行一次
});

希望之花

知道这个梗的人应该都明白，“不要停下来啊！”代表的是什么意思。没错，还远远没有结束。心态崩坏第二弹：js代码本身存在的bug

JavaScript代码是运行在客户端的。所以它代表了一个问题：客户的电脑情况很大程度上决定了代码的成果。比如：

<!-- 引入代码 -->
<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.6.0/styles/github.min.css">

乍一看没什么问题。可是这天你断网了。码农好好的坐在公司里调bug，一口大锅就这么扣在了他头上。

我所遇到的情况正是如此。js里写好了8000ms的延迟，CSS样式文件里也清清楚楚写了8s，但是就是有误差，这个误差不是别的原因，就是由每个人的电脑性能不同决定的。新的图片展示之前，旧的图片会很明显的闪一下。就这么一点点的误差展现了这么刺眼的效果。

求求你让我下班吧……orz

暴力解决

我放弃了思考，如果会闪的话，那就是说，在js执行之前，keyframe动画就已经开始了执行下一个动画。那么，眼不见为净，就让这短暂的几帧动画看不到就好了！

于是，keyframe的最终版：

/*** 用这一段代码替换之前提到的的keyframe*/
@keyframes bg-scale {0% {opacity : 0;transform : translateY(-3%) ;}/*** 在这1/20的时间里什么都不做* 保持透明度为0（什么都看不见的白板）* 于是造成了小于1秒的空白背景*/5% {opacity : 0;transform : translateY(-3%) ;}/*** 紧接着，这1/5的时间里完成了：*   - 透明度从0变为50*   - 从上方3%的位置移到正中间* 所以，之前小于1秒的空白背景就在忍受范围内了！* 我可真是个靓仔*/25% {opacity : 50%;transform: translateY(0);}80% {opacity : 50%;transform: translateY(0);}100% {opacity : 0;transform: translateY(3%);}
}@-webkit-keyframes bg-scale{0% {opacity : 0;-webkit-transform : translateY(-3%) ;}5% {opacity : 0;-webkit-transform : translateY(-3%) ;}25% {opacity : 50%;-webkit-transform: translateY(0);}80% {opacity : 50%;-webkit-transform: translateY(0);}100% {opacity : 0;-webkit-transform: translateY(3%);}
}@-moz-keyframes bg-scale{0% {-moz-opacity : 0;-moz-transform : translateY(-3%) ;}5% {-moz-opacity : 0;-moz-transform : translateY(-3%) ;}25% {-moz-opacity : 50%;-moz-transform: translateY(0);}80% {-moz-opacity : 50%;-moz-transform: translateY(0);}100% {-moz-opacity : 0;-moz-transform: translateY(3%);}
}@-o-keyframes bg-scale{0% {opacity : 0;-o-transform : translateY(-3%) ;}5% {opacity : 0;-o-transform : translateY(-3%) ;}25% {opacity : 50%;-o-transform: translateY(0);}80% {opacity : 50%;-o-transform: translateY(0);}100% {opacity : 0;-o-transform: translateY(3%);}
}

nice！下班啦！

最终样式请查看我的博客：sakebow的小博客。

总结

当然这个方法是有点问题的，比如网速慢的时候只能第一张图片无限循环；后期添加图片的时候非常的麻烦等等非常无奈的问题。但是总体效果还是非常不错的呐！

虽然路途坎坷，但是确实可以看出，Hexo的美化要是认真从前端入手一点点深入，一点点修改，就能够做出你认为最好的。正因为方法多样，所以才有如此广阔的创意模板和二次魔改，这就是Hexo的魅力不是吗？

Hexo设置背景图片轮播效果相关推荐

JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
php制作图片轮播_图片轮播效果实现方法
图片轮播效果如何实现呢本文主要介绍了JQuery实现图片轮播效果的制作原理以及实现代码,文章末尾附上源码下载,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 用JQuery操作DOM ...
Android App图片轮播效果的组件化
简介一个通用的图片轮播效果的通用组件,方便开发者快速集成. 初学者,其实应该实现一个自定义控件的,改天有空,在学习下吧,学习能力一般,以前也没写过java,这个组件都写了好久,惭愧啊. 背景笔者参 ...
html5jqueryl轮播图,基于JQuery的实现图片轮播效果(焦点图)
完整的演示代码: JQuery实现图片轮播效果 #banner {position:relative; width:478px; height:286px; border:1px solid #666 ...
axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现工具/原料 axure7.0 方法/步骤下载需要轮播的图片将图片引入至axure中,将引入的第一张图片转为动态面板将动态 ...
java图片特效轮播代码_JQuery实现图片轮播效果
[实例演示] 1 2 3 4 用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-"JQuery实现图片轮播效果"上 ...
Javascript实现图片轮播效果。
用js做一个简单的图片轮播效果. 思路如下:用JavaScript来控制轮播的图片的样式(margin-left).用计时器来控制图片的自动播放.鼠标点击控制图片的翻页. 效果图如下.具有以下功能:1 ...
Qt之实现图片轮播效果
一.简述今天文章讲述的是如何用Qt实现图片轮播的效果,其实我们经常在网页中看到各种广告就是使用了图片轮播,实现小区域内嵌入多个广告的效果. 下面是CSDN页面中两种常见的图片轮播效果.基本上就是定时 ...
js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片.接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下图片 ...

Hexo设置背景图片轮播效果

导读