js — 原生轮播图的制作

Matcha_ice_cream

已于 2022-08-24 12:18:54 修改

阅读量690

点赞数

分类专栏： # js 文章标签：前端 css3 javascript js案例轮播图

于 2022-08-24 10:42:10 首次发布

本文链接：https://blog.csdn.net/matcha_ice_cream/article/details/126499234

版权

本文介绍了如何使用JavaScript封装简单的动画函数，并结合实际应用创建了一个原生轮播图，涵盖了自动播放、鼠标交互、小圆点导航和无缝滚动等功能。通过index.html、CSS和JS文件详细展示了实现步骤和关键代码段。

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

原生轮播图

原生轮播图

原生轮播图

1、封装一个简单的动画函数

animate.js文件

// 主要进行简单动画函数的封装
/*
  业务实现：封装的animate动画主要实现obj对象简单的左右移动的功能
  其中，obj为目标对象；target为对象需要移动的目标；
  callback为回调函数，可以在动画结束后实现相关的操作
 */
function animate(obj, target, callback) {
   

  // 清除在此之前的定时器，保证一次只开一个定时器
  clearInterval(obj.timer);
  //使用定时器实现左右移动，其中，给每一个对象设置一个定时器
  obj.timer = setInterval(() => {
   

    //这里让动画减速运行，每次运行时，步长按规律减小，但是这样的话，步长值可能有小数，需要取整
    var step = (target - obj.offsetLeft) / 10;

    //对步长值取整。向右移动时，向上取整(Math.ceil)；向左移动时，向下取整(Math.floor)
    step = step > 0 ? Math.ceil(step) : Math.floor(step);

    if(obj.offsetLeft == target) {
   
      // 如果到达目的地之后，清除动画
      clearInterval(obj.timer);
      if(callback) {
   
        // 如果传入的参数有回调函数，则调用回调函数
        callback();
      }
    }

    // obj.style.left获取的是具有定位属性的父元素的左边距。
    // 并且obj.style.left是可读写的；而obj.offsetLeft是只读的属性，返回值为数值
    obj.style.left = obj.offsetLeft + step + 'px';  // 每调用一次，就会计算一下left值
  }, 15);
}

使用animation.js中的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>animate动画实现</title>
</head>

<style>
  span {
     
      display: block;
      position: relative;
      top: 50px;
      left: 0;
      width: 200px;
      height: 200px;
      background-color: #42b983;
  }
</style>
<script src="animate.js"></script>
<body>

<button class="btn400">移动到400的位置</button>
<button class="btn800">移动到800的位置</button>
<span>YiBo</span>

<script>
  window.addEventListener('load', function (){
     
    // var btn400 = document.getElementById('btn400');
    // var box1 = document.getElementById('box1');
    var btn400 = document.querySelector('.btn400');
    var btn800 = document.querySelector('.btn800');
    var span = document.querySelector('span');
    btn400.addEventListener('click', function (