用原生js实现简单的轮播图

闪光亚斯娜

已于 2024-04-23 11:11:40 修改

阅读量162

点赞数 2

文章标签： javascript 前端开发语言

于 2024-04-23 09:41:53 首次发布

本文链接：https://blog.csdn.net/m0_71158285/article/details/138109039

版权

实现的效果：

1.自动循环播放轮播图

2.实现鼠标放在轮播图上停止播放，拿走鼠标继续播放

3.实现小圆点和图片对应，点击小圆点图片也跟着变化

因为点击按钮切换太简单了，就没实现，本人也不是很擅长界面设计，所以界面不是很好看，有能力的可以自己完善一些界面。

展示图

先放js代码，这是最核心的部分，可以直接拿去用，图片资源也不用换，用的小米官方的

<script type="text/javascript">
    //轮播图要播放的图片资源数组
    let images = ['https://i1.mifile.cn/a4/xmad_15627254995865_hbFzT.jpg',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/17e67a3d3c68bb81de533d71b0e73399.jpg?thumb=1&w=1533&h=575&f=webp&q=90',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aaa292a9217632f7d1747afdb0b56cd0.jpg?thumb=1&w=1533&h=575&f=webp&q=90',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96a0d6d237659dfd2aec30ef66a05ec8.jpg?thumb=1&w=1533&h=575&f=webp&q=90',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74a864e59874fc1e17b6709c5256a4ba.jpg?thumb=1&w=1533&h=575&f=webp&q=90'];

    //拿到整个轮播图盒子对象
    const slider = document.querySelector('.slider');

    //拿到轮播图放置图片的盒子对象
    const sliderImages = document.querySelector('.slider .slider-images');

    //拿到轮播图放置图片的img对象
    const sliderImg = document.querySelector('.slider .slider-images .image');

    //拿到轮播图根据图片数量所具有的小圆点的盒子对象
    const sliderfooter = document.querySelector('.slider .slider-footer')

    //根据images图片的数量来生成圆点的个数 
    for (let i = 0; i < images.length; i++) {
      //因为原标签默认是第一张图片,所以这里需要给第一个小圆点添加active类名
      sliderfooter.innerHTML +=' <a class="swiper-bullet"></a>&nbsp;&nbsp;';
      // === 或 == 都可以，但用===更好一些，养成习惯
      if (i === 0) {
        const activeBullet = document.querySelector(`.slider .slider-footer .swiper-bullet:nth-child(1)`);
        activeBullet.classList.add('active');
      }
    }

    //数组下标，用它的变化实现轮播图切换，必须写在外面，不能在定时器里面定义
    let index = 0;

    //编写定时器实现轮播图每隔特定时间自动更换图片，之所以用变量接受返回数据，是因为后面有用，而且必须是let定义，不能是const
    let n = setInterval(() => {

      //实现轮播图切换
      sliderImg.src = images[index++];

      //如果index超过了数组长度，将其置为0
      if (index >= images.length) {
        index = 0;
      }

      //实现圆点跟着对应图片变换样式
      //排他思想，先把所有具有active类名的元素的类名移除，在给自己加上
      const bullet = document.querySelector('.slider .slider-footer .active');
      const activeBullet = document.querySelector(`.slider .slider-footer .swiper-bullet:nth-child(${index + 1})`);
      bullet.classList.remove('active');
      activeBullet.classList.add('active');
      
    },100);

    //实现鼠标移入轮播图暂停切换，移出轮播图继续播放
    slider.addEventListener('mouseenter',() => {
      clearInterval(n);
    });
    slider.addEventListener('mouseleave', () => {
      n = setInterval(() => {

        //实现轮播图切换
        sliderImg.src = images[index++];

        //如果index超过了数组长度，将其置为0
        if (index >= images.length) {
          index = 0;
        }
        const bullet = document.querySelector('.slider .slider-footer .active');
        const activeBullet = document.querySelector(`.slider .slider-footer .swiper-bullet:nth-child(${index + 1})`);
        bullet.classList.remove('active');
        activeBullet.classList.add('active');
      },100);
       
    });

    //小圆点的点击事件，实现点小圆点切换到对应图片，因为有多个小圆点，所以得用循环
    for (let i = 0; i < images.length; i++) {
      const activeBullet = document.querySelector(`.slider .slider-footer .swiper-bullet:nth-child(${i + 1})`);

      activeBullet.addEventListener('click',()=>{
        //排他思想
        const bullet = document.querySelector('.slider .slider-footer .active');
        bullet.classList.remove('active');
        activeBullet.classList.add('active');
        sliderImg.src=images[i];
      })
    }
</script>

接下来便是html和css代码,js代码建议放在</body>标签前

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .slider {
      width: 613px;
      height: 230px;
    }
    .slider .slider-images .image{
      width: 613px;
      height: 230px;
    }
    .slider .slider-footer{
      width: 613px;
      height: 25px;
      text-align: right;
    }
    .slider .slider-footer .swiper-bullet {
      width: 8px;
      height: 8px;
      display: inline-block;
      border: 2px solid #fff;
      border-color: hsla(0, 0%, 100%, .3);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(0, 0, 0, .4);
      opacity: .8;
      cursor: pointer;
    }
    .slider .slider-footer .active {
      width: 8px;
      height: 8px;
      opacity: 1;
      background: #fff;
      border-color: rgba(0, 0, 0, .4);
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slider-images">
      <img src="https://i1.mifile.cn/a4/xmad_15627254995865_hbFzT.jpg" class="image">
    </div>
    <div class="slider-footer">
    </div>
  </div>
</body>
</html>

闪光亚斯娜

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生js实现简单的轮播图

因为点击按钮切换太简单了，就没实现，本人也不是很擅长界面设计，所以界面不是很好看，有能力的可以自己完善一些界面。先放js代码，这是最核心的部分，可以直接拿去用，图片资源也不用换，用的小米官方的。接下来便是html和css代码,js代码建议放在标签前。2.实现鼠标放在轮播图上停止播放，拿走鼠标继续播放。3.实现小圆点和图片对应，点击小圆点图片也跟着变化。1.自动循环播放轮播图。
复制链接

扫一扫