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

2019-08-13 · 大约 1000 个字 · 预计 5 分钟读完

Hexo · icarus主题

Hexo · icarus · 主题 · 走马灯 · 图片轮播

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

首页添加走马灯图片轮播

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

Web前端基础（13）JS实践案例--自动轮播图片

2018-10-14 · 大约 1000 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · 图片轮播 · JavaScript · 案例

Demo演示

布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="all" id="all">
    <div class="screen">
        <ul id="ul">
            <li><img src="images/banner1.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner2.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner3.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner4.png" alt="" width="800" height="500"></li>
        </ul>
    </div>
</div>