原生JavaScript实现的无缝滚动功能详解
程序员文章站
2022-06-22 14:01:54
本文实例讲述了原生javascript实现的无缝滚动功能。分享给大家供大家参考，具体如下：
无缝轮播（原生javascript）
一：html部分：
本文实例讲述了原生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();
})();