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


Posted in Javascript onJanuary 17, 2020

本文实例讲述了原生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();
  })();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 #Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
JS实现transform实现扇子效果
Jan 17 #Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 #Javascript
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
PHP中session变量的销毁
2014/02/27 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
jquery的index方法实现tab效果
2011/02/16 Javascript
javascript数组的使用
2013/03/28 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
vue-router单页面路由
2017/06/17 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python部署web开发程序的几种方法
2017/05/05 Python
python万年历实现代码 含运行结果
2017/05/20 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
django settings.py 配置文件及介绍
2019/07/15 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
实习协议书范本
2014/09/25 职场文书
太行山上观后感
2015/06/05 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android