原生JavaScript实现的无缝滚动功能详解

  

    

    

    

    

    

    

    

  
  
<
  
>
  

    

    

    

    

    

    

  

  var GLOBAL = {};
  // 定义命名空间函数
  GLOBAL.namespace = function(str) {
    var arr = str.split("."),
      o = GLOBAL;
    for(i = (arr[0] === "GLOBAL") ? 1 : 0; i < arr.length; i++) {
      o[arr[i]] = o[arr[i]] || {};
      o = o[arr[i]];
    }
  };
  // Dom命名空间
  GLOBAL.namespace("Dom");
  // 获取className 第一个参数必须的（class名）、第二个参数父容器，缺省为body节点、第三个参数为DOM节点标签名
  GLOBAL.Dom.getElementsByClassName = function(str, root, tag) {
    if(root) {
      root = typeof root === 'string' ? document.getElementById(root) : root;
    }
    else {
      root = document.body;
    }
    tag = tag || '*';
    var eles = root.getElementsByTagName(tag), // 获取父容器下所有标签
      arr = [];
    for(var i = 0, n = eles.length; i < n; i++) {
      for(var j = 0, k = eles[i].className.split(' '), l = k.length; j < l; j++) {
        if(k[j] == str) {
          arr.push(eles[i]);
          break;
        }
      }
    }
    return arr;
  };
  // Event命名空间
  GLOBAL.namespace('Event');
  // 添加事件（或者说监听事件）
  GLOBAL.Event.addHandler = function(node, eventType, handler) {
    node = typeof node === 'string' ? document.getElementById(node) : node;
    if(node.addEventListener) {
      node.addEventListener(eventType, handler, false);
    }
    else if(node.attachEvent) {
      node.attachEvent('on' + eventType, handler);
    }
    else {
      node['on' + eventType] = handler;
    }
  };

function getStyle(obj, attr) {
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true; //这一次运动结束——————所有值都到达了
    for(var attr in json) {
      //1.取当前的值
      var iCur = 0;
      if(attr == 'opacity') {
        var iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
      }
      else {
        var iCur = parseInt(getStyle(obj, attr));
      }
      //2.计算速度
      var iSpeed = (json[attr] - iCur)/6;
      iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
      //3.检测停止
      if(iCur != json[attr]) {
        bStop = false;
      }
      if(attr == 'opacity') {
        obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) +')';
        obj.style.opacity = (iCur + iSpeed)/100;
      }
      else {
        obj.style[attr] = iCur + iSpeed + 'px';
      }
    }
    if(bStop) {
      clearInterval(obj.timer);
      if(fn) {
        fn();
      }
    }
  }, 30);
}

  (function() {
    var oBox = document.getElementById('box');
    var oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide', oBox)[0];
    var li = oXSlide.getElementsByTagName('li');
    var liTabs = GLOBAL.Dom.getElementsByClassName('tabs', oBox)[0].getElementsByTagName('li');
    var iNow = 0;
    function tab() {
      var timer = null;
      var playTime = 3000;
      var btn = GLOBAL.Dom.getElementsByClassName('btn', oBox);
      oXSlide.style.width = li.length * li[0].offsetWidth + 'px';
      for(var i = 0, len = liTabs.length; i < len; i++) {
        liTabs[i].index = i;
        GLOBAL.Event.addHandler(liTabs[i], 'mouseover', function() {
          iNow = this.index;
          showItem(iNow);
        });
      }
      GLOBAL.Event.addHandler(btn[0], 'click', moveLeft);
      GLOBAL.Event.addHandler(btn[1], 'click', moveRight);
      timer = setInterval(autoPlay, playTime);
      function autoPlay() {
        moveRight();
      }
      GLOBAL.Event.addHandler(oBox, 'mouseover', function() {
        clearInterval(timer);
      });
      GLOBAL.Event.addHandler(oBox, 'mouseout', function() {
        timer = setInterval(autoPlay, playTime);
      });
    }
    // 选项卡
    function showItem(n) {
      for(var i = 0, len = liTabs.length; i < len; i++) {
        liTabs[i].className = 'tab';
      }
      if(n == liTabs.length) {
        liTabs[0].className = 'tab cur';
      }
      else {
        liTabs[n].className = 'tab cur';
      }
      startMove(oXSlide, {'left': -n * li[0].offsetWidth});
    }
    function moveLeft() {
      iNow--;
      if(iNow == -1) {
        oXSlide.style.left = -liTabs.length * li[0].offsetWidth + 'px';
        iNow = liTabs.length - 1;
      }
      showItem(iNow);
    }
    function moveRight() {
      iNow++;
      if(iNow == li.length) {
        oXSlide.style.left = 0;
        iNow = 1;
      }
      showItem(iNow);
    }
    tab();
  })();