最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
原生JavaScript如何实现无缝滚动功能 原生JavaScript实现无缝滚动功能代码
时间:2020-01-17 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下原生JavaScript实现无缝滚动功能代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
无缝轮播(原生JavaScript)
一:HTML部分:
二、CSS部分
css;">
三、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.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(); })();
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12