EMLOG博客侧边栏添加轮播小程序广告

EMLOG博客侧边栏是个可以修饰的地方，下面为每隔3秒自动切换图片的组件

图片演示

EMLOG博客侧边栏添加轮播小程序广告

使用方法

emlog博客系统的侧边栏由于在pc端可以看到，移动端效果看不到了，如您想具体查看效果请移步pc端

第一步：进入后台侧边栏组件管理

第二步：添加自定义一个新的组件

第三步：填写自定义的组件名，内容定义为以下代码

<div class="blogger-img">
            <!-- alt：图片路径失败时替换显示内容 -->
            <img class="img-slide img" src="https://ae01.alicdn.com/kf/Hb9a8c87a0e3949b1ac3876561ea7b9f7z.jpg" alt="img1">
            <img class="img-slide img" src="https://ae02.alicdn.com/kf/H2690e66514e048d59c26a15b59137051m.jpg" alt="img2">
            <img class="img-slide img" src="https://sc04.alicdn.com/kf/H3cd6d1a30f48488dbff78d56d75052dbG.jpg" alt="img3">
        </div>
    </body>
&lt;script type="text/javascript"&gt;
    // index：索引， len：长度
    var index = 0, len;
    // 类似获取一个元素数组
    var imgBox = document.getElementsByClassName("img-slide");
    len = imgBox.length;
    imgBox[index].style.display = 'block';
    // 逻辑控制函数
    function slideShow() {
        index ++;
        // 防止数组溢出
        if(index &gt;= len) index = 0;
        // 遍历每一个元素
        for(var i=0; i&lt;len; i++) {
            imgBox[i].style.display = 'none';
        }
        // 每次只有一张图片显示
        imgBox[index].style.display = 'block';
    }

    // 定时器，间隔3s切换图片
    setInterval(slideShow, 3000); 
&lt;/script&gt;</pre><div><br></div><div>第四步：保存成功，添加到想展现的侧边栏即可</div><br>

本文最后更新于2021-1-9，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！