当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生JavaScript实现的无缝滚动功能详解

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

本文实例讲述了原生javascript实现的无缝滚动功能。分享给大家供大家参考，具体如下：

无缝轮播（原生javascript）

一：html部分：

<div class="box" id="box">
  <ul class="j_xslide list">
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/1.jpg" alt="广告一" /></a></li>
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/2.jpg" alt="广告一" /></a></li>
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/3.jpg" alt="广告二" /></a></li>
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/4.jpg" alt="广告三" /></a></li>
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/5.jpg" alt="广告四" /></a></li>
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/6.jpg" alt="广告五" /></a></li>
    <li class="j_tabcontent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/1.jpg" alt="广告一" /></a></li>
  </ul>
  <div class="btn btnl"><</div>
  <div class="btn btnr">></div>
  <ul class="tabs">
    <li class="tab cur"></li>
    <li class="tab"></li>
    <li class="tab"></li>
    <li class="tab"></li>
    <li class="tab"></li>
    <li class="tab"></li>
  </ul>
</div>

二、css部分

<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul li {
    list-style: none;
  }
  .clearfix {
    zoom: 1;
  }
  .clearfix:after {
    display: block;
    clear: both;
    content: '';
  }
  .box {
    width: 1226px;
    height: 460px;
    overflow: hidden;
    position: relative;
    margin: 20px auto 0;
  }
  .box .list {
    position: relative;
    left: 0;
    height: 460px;
  }
  .box .list li img,
  .box .list li {
    float: left;
    width: 1226px;
    height: 460px;
  }
  .box .tabs {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 99999;
   }
  .box .tabs .tab {
    float: left;
    width: 6px;
    height: 6px;
    border: 2px solid #f47500;
    border-radius: 100%;
    margin-right: 10px;
    cursor: pointer;
    background: #fcf2cf;
    font-family: arial;
  }
  .box .tabs .tab:hover,
  .box .tabs .cur {
    border: 2px solid #1227e4;
    background: #26c776;
  }
  .box .btn {
    position: absolute;
    width: 30px;
    height: 70px;
    top: 50%;
    margin-top: -35px;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 70px;
  }
  .box:hover .btn {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .box .btnl {
    left: 10px;
  }
  .box .btnr {
    right: 10px;
  }
</style>

三、javascript部分

3.1 base.js

  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;
    }
  };

3.2 完美运动框架部分代码：

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);
}

3.3 page.js（实现功能部分）

  (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();
  })();

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网