html5 原生虚拟滚动,原生JavaScript实现的无缝滚动功能详解

本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考，具体如下：

无缝轮播(原生JavaScript)

一：HTML部分：

• 
• 
• 
• 
• 
• 
• 

<

>

二、CSS部分

* {

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;

}

三、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程序设计有所帮助。