本文实例讲述了原生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.2);
- font-size: 30px;
- color: #fff;
- text-align: center;
- line-height: 70px;
- }
- .Box:hover .btn {
- background-color: rgba(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],moveRight);
- timer = setInterval(autoPlay,playTime);
- function autoPlay() {
- moveRight();
- }
- GLOBAL.Event.addHandler(oBox,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程序设计有所帮助。