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

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

本文实例讲述了原生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();
 })();