初学者简易轮播图实现

wcl0210

已于 2022-02-25 22:33:41 修改

阅读量615

点赞数

于 2022-01-18 12:55:31 首次发布

本文链接：https://blog.csdn.net/wcl0210/article/details/122557690

版权

本文适合初学者，通过简单的HTML、CSS和JavaScript代码实现轮播图效果，详细介绍了各个部分的功能。

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

因为自己也是个初学者，所以都是使用了最简单的原理来实现轮播图的效果

轮播图运行效果

HTML部分

  <div class="box">

      <!-- 图片集，有几张照片添加几个li -->

      <ul class="Imgs">

        <li class="Img"><img src="./image/1.png" alt="" /></li>

        <li class="Img"><img src="./image/2.png" alt="" /></li>

        <li class="Img"><img src="./image/3.png" alt="" /></li>

        <li class="Img"><img src="./image/4.png" alt="" /></li>

      </ul>

      <!-- 上一张和下一张 -->

      <div id="prev"><</div>

      <div id="next">&g