仿京东轮播图详解版jQuery

最新推荐文章于 2023-04-06 01:30:17 发布

抬头就是阳光chun

最新推荐文章于 2023-04-06 01:30:17 发布

阅读量933

点赞数 4

分类专栏： jQuery 文章标签： jQuery 仿京东轮播图详解轮播图简单易懂 js

本文链接：https://blog.csdn.net/weixin_42313390/article/details/80841887

版权

本文主要分析实现思路,添加了较详细的注释。适于前端初学者参考，如有疑问和不足之处,欢迎各路大神批评指正。

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

1.效果图

动态效果详解:
（1）鼠标离开时,自动切换图片,底部小圆点按钮也跟着变化。
（2）鼠标移入图片，显示左右箭头，停止自动轮播。
（3）鼠标移入左右箭头时，改变当前移入箭头的背景颜色。
（4）点击右边箭头，切换到下一张图片，对应下标的小圆点按钮样式改变。
（5）点击左边箭头，切换到上一张图片，对应下标的小圆点按钮样式改变。
（6）鼠标移入底部小圆点按钮，当前移入的小圆点按钮样式改变，且显示对应下标的图片。

2.HTML部分

2.1 思路分析

（1）首先要有一个div父盒子,用来显示当前图片,盒子宽高和图片宽高一致。
（2）div里包括三个子元素，一个ul标签，用来存放所有图片，两个div，一个用来放左右箭头，另一个放底部小圆点按钮。

2.2 代码

<div class="slider">
    <!--ul中存放所有图片,图片大小保持一致-->
    <ul>
      <li>
        <a href="#">
          <img src="images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/5.jpg" alt="">
        </a>
      </li>
      <li>