本文实例讲述了原生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="/UploadFiles/2021-04-02/1.jpg">
二、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") "Dom");
// 获取className 第一个参数必须的（class名）、第二个参数父容器，缺省为body节点、第三个参数为DOM节点标签名
GLOBAL.Dom.getElementsByClassName = function(str, root, tag) {
if(root) {
root = typeof root === 'string' "htmlcode">
function getStyle(obj, attr) {
return obj.currentStyle "htmlcode">
(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数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。