原生JS风箱式轮播图Demo与通用运动框架封装教程

本文介绍如何利用原生JavaScript实现风箱式轮播图效果，并在此过程中封装了一个通用的运动框架。该框架兼容多浏览器，支持opacity、z-index及常见几何属性，通过封装animate函数简化动画逻辑，为构建复杂轮播组件提供基础支持。

项目背景与概述

本示例代码基于某培训机构的教学项目，特此致谢。接下来直接进入代码实现环节。

在前端开发中，轮播图是必须掌握的核心技能之一。为了更高效地实现各类轮播效果，本文封装了一套通用的运动框架。


function getStyle(obj,attr) {
  if(obj.currentStyle){
    return obj.currentStyle[attr];//为了获取IE下的属性值
  }else{
    return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值
  }
}

function animate(obj,json){
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var flag = true;
    var current = 0;
    for(var attr in json){
      if(attr == 'opacity'){
        current = parseInt(getStyle(obj,attr)*100);
      }else{
        current = parseInt(getStyle(obj,attr));
      };

      var step = (json[attr] - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      //先判断属性是否为透明度
      if(attr == 'opacity'){
        //首先判断浏览器是否支持opacity
        if('opacity' in obj.style){
          obj.style.opacity = (current + step) / 100;
        }else{
          obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';
        }
      //再判断属性是否为z-index
      }else if(attr == 'zIndex'){
        obj.style.zIndex = json[attr];
      //最后再判断
      }else{
        obj.style[attr] = current + step + 'px';
      }

      if(current != json[attr]){
        flag = false;
      }
    }

    if(flag){
      clearInterval(obj.timer);
    }
  },5);
}

该框架具备良好的浏览器兼容性，并支持传入opacity和z-index等属性，同时涵盖了width、height、left、right等常用几何属性的处理。借助此框架，可以构建出流畅的交互效果。下面开始具体实现步骤。

HTML结构与CSS样式

首先构建index.html文件。


<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

HTML结构较为简单，主要将图片作为背景图通过JavaScript动态插入到li元素中，随后配合CSS进行样式调整。


*{
    margin:0px;
    padding:0px;
  }
  #box{
    width:1300px;
    height:400px;
    margin:100px auto;
    overflow: hidden;
  }
  #box ul{
    height:400px;
    width:1300px;
  }
  #box ul li{
    width:240px;
    height:400px;
    float:left;
    overflow: hidden;
  }

JavaScript核心逻辑与运动框架

核心JavaScript逻辑如下：


window.onload = function () {
    var box = document.getElementById('box');
    var aLi = box.children[0].children;
    for(var i=0;i<aLi.length;i++){
      aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg';
      aLi[i].onmouseover = function(){
        for(var i=0;i<aLi.length;i++){
          animate(aLi[i],{width:100});
        }
        animate(this,{width:800});
      };
      aLi[i].onmouseout = function(){
        for(var i=0;i<aLi.length;i++){
          animate(aLi[i],{width:240});
        }
      }
    }
  }

原生JS实现风箱式轮播图及运动框架封装

项目背景与概述

HTML结构与CSS样式

JavaScript核心逻辑与运动框架

效果总结与扩展

实用工具推荐