原生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 中创建自定义对象的方法汇总
Dec 04 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 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
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php文件包含的几种方式总结
2019/09/19 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python实现大学人员管理系统
2019/10/25 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
中医学专业自荐信范文
2014/04/01 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
滞留工资返还协议书
2014/10/19 职场文书
工程款申请报告
2015/05/15 职场文书
行政诉讼答辩状
2015/05/21 职场文书
赢在中国观后感
2015/06/02 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js