js的轮播图

最新推荐文章于 2023-08-09 23:10:39 发布

beelliang

最新推荐文章于 2023-08-09 23:10:39 发布

阅读量329

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/L_SERAFINA/article/details/124274990

版权

本文介绍了如何使用JavaScript实现轮播图功能，包括获取按钮和轮播图、设置按钮的鼠标事件、创建并绑定小圆点、点击小圆点切换图片、处理最后一张图片的跳转、自动播放轮播图、鼠标悬停时停止播放以及实现点击按钮的节流阀机制。

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

实现自动轮播、左右按钮切换上下一张图片、点击小圆点切换图片效果图：

1.前期html和css布局

<div class="main">
      <div class="focu">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
             <
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">></a>
        //大轮播
        <ul>
          <li>
            <a href="#"><img src="../img/壁纸1.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="../img/壁纸2.jpg" alt="" /></a>
          </li>
          <li>
            <a href&