原生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类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php include类文件超时问题处理
2015/02/06 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
超简单使用Python换脸实例
2019/03/27 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
应届生求职自荐信
2014/07/04 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
《实心球》教学反思
2016/02/23 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
SpringAop日志找不到方法的处理
2021/06/21 Java/Android