原生JavaScript實現(xiàn)的無縫滾動功能詳解
更新時間：2020年01月17日 11:05:32 作者：林飛的夢囈
這篇文章主要介紹了原生JavaScript實現(xiàn)的無縫滾動功能,結合實例形式詳細分析了JavaScript無縫滾動具體實現(xiàn)步驟、相關操作技巧與注意事項,需要的朋友可以參考下
本文實例講述了原生JavaScript實現(xiàn)的無縫滾動功能。分享給大家供大家參考，具體如下：
無縫輪播（原生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 = {};
// 定義命名空間函數(shù)
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 第一個參數(shù)必須的（class名）、第二個參數(shù)父容器，缺省為body節(jié)點、第三個參數(shù)為DOM節(jié)點標簽名
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');
// 添加事件（或者說監(jiān)聽事件）
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（實現(xiàn)功能部分）
(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數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
本文主要介紹了js獲取Element元素的四種常用方法,通過介紹getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,幫助讀者了解如何通過不同的方式獲取頁面中的元素,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了js中settimeout方法加參數(shù),需要的朋友可以參考下2014-02-02
這篇文章主要介紹了如何使用JavaScript檢測空閑的瀏覽器選項卡，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了鼠標懸浮停留三秒后顯示大圖，在網頁中還是比較實用的，下面是示例代碼2014-09-09
這篇文章主要介紹了JS實現(xiàn)的網頁背景閃電閃爍效果代碼,涉及JavaScript定時函數(shù)結合頁面元素樣式操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)有趣的倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
聯(lián)合類型在?TypeScript?中相當流行，你可能已經用過很多次了。交叉類型稍微不那么常見，它們似乎引起更多的困惑，這篇文章主要介紹了一文讀懂TS?中聯(lián)合類型和交叉類型的含義,需要的朋友可以參考下2022-12-12
webpack打包后index.html引用文件地址問題小結
在前端開發(fā)中,src 屬性指定的相對路徑是相對于當前 HTML 文件的路徑,而不是相對于網站的根目錄,這篇文章主要介紹了webpack打包后index.html引用文件地址問題,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了js圖片輪播特效，圖片切換效果特別適合做產品演示，感興趣的小伙伴可以參考下2015-09-09
這篇文章主要介紹了JS實現(xiàn)FLASH幻燈片圖片切換效果的方法,實例分析了javascript操作圖片實現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下2015-03-03