Yilia主题自动切换左侧背景

不再是单调的静态背景，主题左侧背景图片实现自动切换。

代码修改

接上一篇博客：Yilia主题自定义左侧背景图片 (设置单图背景可以参考这个)

注释掉yilia目录下_config.yml中的header选项

优化yilia\layout\_partial目录下的left-col.ejs

<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>

改为：

<div class="overlay"></div>

JS实现自动切换图片(随机或者顺序切换)

随机切换

<script >
    var bglist = [];
    bglist[0] = "图片1地址";
    bglist[1] = "图片2地址";
    bglist[2] = "图片3地址";
    setInterval('Getbg();', 3000);   //切换时间间隔，单位毫秒
    function Getbg(){
                var bgindex = Math.round(Math.random()*2);
                //输出随机背景
                var bkg = document.getElementsByClassName("left-col")[0];
                //这句话意思是找名字是left-col的class元素，找id可以用getElementById()
                bkg.style.backgroundImage="url("+ bglist[bgindex] +")";
}
</script>

顺序切换

<script >
    window.onload=function(){
    var bglist = [];
        bglist[0] = "图片1地址";
        bglist[1] = "图片2地址";
        bglist[2] = "图片3地址";
        bglist[3] = "图片4地址";
        bglist[4] = "图片5地址";
        bglist[5] = "图片6地址";
    var i = 0;
    var bkg=document.getElementsByClassName("left-col")[0];
    bkg.style.background="url(初始图片地址)";
            function time(){
                i<5?i++:i=0;
                //这里控制条件，5是图片数量减一
                bkg.style.background="url("+bglist[i]+")";
            }
            setInterval(time,3000);
    }
</script>

ヾ(◍°∇°◍)ﾉﾞ，以后有可能还会改成横向滚动

• 本文作者： 本该如此
• 本文链接： https://anyway521.github.io/post/d96c05cb.html
• 最后更新： 2020年10月09日 22:44:28
• 版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

赞

赏杯Java？٩(๑^o^๑)۶

创作不易，感谢支持！