原生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 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
vue实现节点增删改功能
Sep 26 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
由php if 想到的些问题
2008/03/22 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python列表返回重复数据的下标
2020/02/10 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
简单了解Django项目应用创建过程
2020/07/06 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
优秀经理获奖感言
2014/03/04 职场文书
学校花圃的标语
2014/06/18 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
批评与自我批评范文
2014/10/15 职场文书
运动会广播稿100字
2015/08/19 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技