纯HTML与JavaScript实现轮播图

guiqiu1111

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

阅读量544

点赞数

文章标签： css3 html javascript

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

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

版权

这篇博客介绍了如何不依赖CSS3，仅使用HTML和JavaScript来实现一个轮播图的效果。内容分为三个部分：HTML结构的搭建、CSS样式的设置以及JavaScript逻辑的实现。

摘要由CSDN通过智能技术生成

一、效果

轮播图

代码实现

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>