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>

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