原生JavaScript实现的无缝滚动功能详解
本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考，具体如下：
创新互联长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为台儿企业提供专业的做网站、网站制作，台儿网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
无缝轮播（原生JavaScript）
一：HTML部分：
二、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.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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
标题名称：原生JavaScript实现的无缝滚动功能详解
网站链接：http://mswzjz.cn/article/pddpie.html