纯HTML与JavaScript实现轮播图

VIP文章 guiqiu1111

已于 2022-09-06 21:02:25 修改

阅读量486

点赞数

文章标签： css3 html javascript

于 2022-09-06 21:00:34 首次发布

本文链接：https://blog.csdn.net/weixin_50256767/article/details/126733651

版权

一、效果

轮播图

代码实现

1、HTML部分

<div class="box" id="box">
    <div class="inner"><!--相框-->
        <ul>
            <li><img src="../beijing01.png" alt=""/></li>
            <li><img src="../beijing1.jpg" alt=""/></li>
            <li><img src="../beijing2.jpg" alt=""/></li>
            <li><img src="../beijing5.jpg" alt=""/></li>
        </ul>
        <ol></ol><!--小按钮-->
    </div>
    <!--左右按钮-->
    <div id="focus"><span id="left">&lt;</span><span id="right">&gt;</span>
    </div>
</div>