原生JavaScript實現的無縫滾動功能詳解
阿新 • • 發佈:2020-01-18
本文例項講述了原生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程式設計有所幫助。