如何使用js实现轮播图

芒果555
120 阅读5分钟

我正在参与掘金创作者训练营第5期， 点击了解活动详情

网页轮播图

我们在上网时总能看到网页上醒目的轮播图,吸人眼球,它是怎么实现的呢,此文章记录一下轮播图的实现

动画函数准备

我们想要轮播图有滑动的效果的话需要借助动画函数

准备工作

首先,我们先准备一个盒子和两个按钮

1659581325604.png

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .skyblue {
      margin-top: 50px;
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <button>
    点击
  </button>
  <button class="babai">
    点击800
  </button>
  <div class="skyblue">
  </div>
<body>

我们想要点击第一个按钮让盒子往右移动500px,点击第二个按钮往右移动到800px的位置,那么我们现获取这几个元素,然后给按钮添加点击事件

1659582433927.png 可是这样的效果是直接"跳"过去,我们可是使用定时器,让它慢慢走,每次走剩余路程的1/10,再添加点细节

1659584349737.png

效果如下:

click.gif

动画封装

那么我们可以将这个动画函数进行封装,便于我们的使用

   //声明动画函数
    //callback -- 回调函数，写在最后，当其他函数执行完成才执行
    function animate(obj, target,callback) {
      obj.timer = setInterval(function () {
        //定义步长
        //让步长随着进行变化
        let step = (target - obj.offsetLeft) / 10;
        //是正直就往上取整，负值往下取整
        step = step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
        //当obj走到指定位置时，清除定时器
        if (obj.offsetLeft == target) {
          clearInterval(obj.timer);
          //当有回调函数时，调用回调函数
          if (callback) {
            callback();
          }
        }
        //让obj走步长
        obj.style.left = obj.offsetLeft + step + 'px';
      }, 30)
    }

那么我们动画函数就封装好了,第一个参数写调用的对象,第二个参数写需要移动的距离,第三个就是回调函数了

那么我们实现动画的代码就成了这样

1659593915656.png

轮播图的实现

准备工作

轮播图其实就是一个ul里面包含很对li,li里面放图片,然后每次让ul移动,一定是ul来移动li的宽度,它的结构是这样的

1659594186352.png 我们将ul设置溢出隐藏,然后加上左右按钮和底部控制的小圆圈就是我们的结构了

1659594263719.png 然后开始写我们的js代码,哦对了,记得导入我们的动画函数animate,注意要导入在index.js上面,因为我们在index.js里面需要使用它

1659594387076.png

接下来开始写js代码

js代码部分

首先我们先给window添加load事件,让页面加载完成在执行js代码

1659594460257.png 然后我们获取页面的元素(左右按钮,小圆圈,轮播图区域,ul等)

1659594536641.png

左右按钮显示与隐藏

首先我们的左右按钮是隐藏的,我们先给轮播图区域添加移入移出事件,移入显示左右按钮,移出就隐藏

1659594674448.png

然后就有了这样的效果

y.gif

底部小圆圈的处理

接下来我们处理底部小圆圈

我们思考一下,我们图片的个数是不是不固定的,要是把小圆圈写死了,那么我们再添加图片就得手动增加小圆圈的个数,那么我们是不是可以让系统自己根据图片的个数来自己生成对应的小圆圈

接下来就来实现

1659595410305.png

我们想要点击每隔小圆圈都会让图片跟着动,那么我们需要在生成时记录一下小圆圈的下标,让它和图片下标对应,并且给每一个小圆圈添加添加click事件

1659595597208.png

其中current这个类是让小圆圈高显示的,再利用排它思想,实现点击小圆圈高亮显示,然后当我们点击小圆圈时,调用animate动画函数,让ul进行移动,移动的距离就是focus的宽度*当前小圆圈记录的下标

focusWidth是一个常量,是focus(滚动)区域的宽度.

那么我们就实现了点击小圆圈图片移动的效果

点击.gif

左右按钮点击事件

我们点击左右按钮图片进行切换,那么要怎么实现呢

首先分析一下,我们点击左右按钮,让图片移动一个focusWidth的距离,并且底部小圆圈也进行相应的改变,那么到最后一张图片的时候图片就没了对吧

我们的处理方法是让**最后一张图片后在加上第一张图片,然后当移动结束后瞬间让ul的left变成0,**这样就回到了第一张图片,因为计算机处理速度是很快的,我们人眼处理不了,所有就会感觉轮播图是循环的,接下来我们就来实现这个效果

1659596652651.png 其中num是记录当前的li的下标,当回到第一张图片时让num=0

circleNum是记录小圆圈的下标

左侧按钮同理

1659596681062.png 但是现在会出现一种情况,当我们先点击小圆圈进行移动后再点击左右按钮就会出现bug,就像下面一样

这时是因为我们的num和circleNum和小圆圈记录的索引号不一致,那么我们需要在每次点击小圆圈时将小圆圈记录的索引号同步给num和circleNum就好了

1659597268141.png

自动播放

b.gif 我们在网站上看到的轮播图,我们不用点击也会自动播放,这肯定就是用我们的定时器做的了,那么我们接下来来实现这个功能

1659597331962.png 其实是很好实现的,直接定义一个定时器,相当于每过2s就自动点击一下右侧按钮,当我们打开网页时就可以开始轮播了,但是我们想要当鼠标移入时就不自动滚动了,那么我们就可以给focus的移入移出分别添加清除定时器和启动定时器的处理. 1659597504890.png

这样我们的轮播图就实现了,让我们来看下整体效果吧 sucess.gif

avatar
文章
阅读
粉丝