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

无缝轮播（原生JavaScript）

一：HTML部分：

<div> <ul> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/1.jpg" alt="广告一" /></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/2.jpg" alt="广告一" /></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/3.jpg" alt="广告二" /></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/4.jpg" alt="广告三" /></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/5.jpg" alt="广告四" /></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/6.jpg" alt="广告五" /></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/main/display/1.jpg" alt="广告一" /></a></li> </ul> <div><</div> <div>></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></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(); })();