面向对象无缝滚动轮播(附带面向过程代码)

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象无缝滚动轮播(附带面向过程代码)相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner</title>
<link rel="stylesheet" href="CSS/main1.css">
</head>
<body>
<div class="banner-wrapper" id="banner-wrapper">
<div class="banner" id="banner">
<img src="images/8.jpg" alt="假象图">
<img src="images/1.jpg" alt="广告图">
<img src="images/2.jpg" alt="广告图">
<img src="images/3.jpg" alt="广告图">
<img src="images/4.jpg" alt="广告图">
<img src="images/5.jpg" alt="广告图">
<img src="images/6.jpg" alt="广告图">
<img src="images/7.jpg" alt="广告图">
<img src="images/8.jpg" alt="广告图">
<img src="images/1.jpg" alt="假象图">
</div>
<div class="btn prev" id="prev">&lt;</div>
<div class="btn next" id="next">&gt;</div>
<ul class="circle" id="circle">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="JS/object.js"></script>
</body>
</html>

面向对象js代码

window.onload = function() {
new Banner(‘banner-wrapper‘)
}

function Banner(id) {
var _this = this
var bannerWrapper = document.getElementById(id)
this.banner = document.getElementById(‘banner‘)
this.oimg = banner.getElementsByTagName(‘img‘)[0]
this.imglen = banner.getElementsByTagName(‘img‘).length
this.oimgW = this.oimg.clientWidth
this.prevBtn = document.getElementById(‘prev‘)
this.nextBtn = document.getElementById(‘next‘)
this.circle = document.getElementById(‘circle‘)
this.ali = circle.getElementsByTagName(‘li‘)
this.num = 1;
this.Timer = null;

aliActive = function() {
_this.aliActive(this)
}

imgChange = function() {
_this.imgChange(this)
}
autoPlay = function() {
_this.autoPlay(this)
}

//下一张
this.nextBtn.onclick = function() {
_this.imgChange(this)
}
//上一张
this.prevBtn.onclick = function() {
_this.prevClick(this)
}

// 鼠标移入时清除定时器
bannerWrapper.onmouseover = function() {
clearInterval(_this.Timer);
}
// 鼠标移出时继续播放
bannerWrapper.onmouseout = function() {
_this.autoPlay(this)
}
// 启动定时器
_this.autoPlay(this)

/*滑动悬浮下标小圆点进行切换*/
for (var i = 0; i < this.ali.length; i++) { //遍历li

this.ali[i].index = i; //下标索引
this.ali[i].onmouseover = function() {
_this.aliOnmouseover(this)
}
}
}

Banner.prototype.prevClick = function() {
var _this = this
this.num--;
if (this.num == 0) {
this.num = 9;
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 0s‘;
this.banner.style.webkitTransition = ‘all 0s‘;
this.num = 8;
}

setTimeout(function() {
_this.Transition(this)
}, 0);
aliActive();
}

Banner.prototype.Transition = function() {
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 1s‘;
this.banner.style.webkitTransition = ‘all 1s‘;
}

Banner.prototype.imgChange = function() {
var _this = this
this.num++;
if (this.num == 9) {
this.num = 0;
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 0s‘;
this.banner.style.webkitTransition = ‘all 0s‘;
this.num = 1;
}
setTimeout(function() {
_this.Transition(this)
}, 0);
_this.aliActive(this)
}

Banner.prototype.aliActive = function(oLi) {
for (var i = 0; i < this.ali.length; i++) {
this.ali[i].className = ‘‘;
}
this.ali[this.num - 1].className = ‘active‘;
}

Banner.prototype.autoPlay = function() {
var _this = this
_this.Timer = setInterval(function() {
_this.imgChange(this)
}, 2000);
}

Banner.prototype.aliOnmouseover = function(oLi) {
for (var j = 0; j < this.ali.length; j++) {
this.ali[j].className = ‘‘;
}
oLi.className = ‘active‘;
this.num = oLi.index + 1; //由于图片跟索引下标相差1 因此+1
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 1s‘;
this.banner.style.webkitTransition = ‘all 1s‘;

}

面向过程js代码

window.onload = function() {

var bannerWrap = document.getElementById(‘banner_wrap‘);
var banner = document.getElementById(‘banner‘);
var prevBtn = document.getElementById(‘prev‘);
var nextBtn = document.getElementById(‘next‘);
var oimg = banner.getElementsByTagName(‘img‘)[0];
var oimgW = oimg.clientWidth; //获取一张图片的宽度
var cir = document.getElementById(‘circle‘);
var ali = cir.getElementsByTagName(‘li‘); //获取li的集合
/*var num = 0;*/ //num从0开始记 0 1 2 3...6 7 没有假象图初始化为0
var num = 1; //由于前面添加了假象图 因此初始化为1；
var len = banner.getElementsByTagName(‘img‘).length; // 图片的数量

/*封装函数*/
function imgChange() {
// banner.style.left = -oimgW + ‘px‘;//移动一张图片 添加一个变量可改变n张图片的宽度
num++;
// if (num == 8) { //对num的值进行判断
// num = 0;
// }
if (num == 9) { //由于假象图 初始值为1，因此判断要加1；
num = 0;
banner.style.left = -num * oimgW + ‘px‘; //跳回假象图
banner.style.transition = ‘all 0s‘; //跳回假象图 不要过度效果
banner.style.webkitTransition = ‘all 0s‘;
num = 1; //从假象图到真1图 实现有过渡效果 不加上num=1 会出现undefined
}
setTimeout(function() { //内部函数语句
banner.style.left = -num * oimgW + ‘px‘; //移动图片的宽度进行位移
banner.style.transition = ‘all 1s‘; //过渡动画
banner.style.webkitTransition = ‘all 1s‘;
}, 0)
// setTimeout 运行机制 先执行主线程里的语句，之后再执行内部函数里面的语句
/*banner.style.left = -num * oimgW + ‘px‘; //移动图片的宽度进行位移
banner.style.transition = ‘all 1s‘; //过渡动画
banner.style.webkitTransition = ‘all 1s‘;*/
/*js dom 操作的合并机制 因此引入定时器 实现假象图跳转真图无过渡效果*/

// for (var i = 0; i < ali.length; i++) { //消除其他li的样式
// ali[i].className = ‘‘;
// }
// 由于初始值改为1，因此num要-1才能让小标圆点对应上
// /*ali[num].className = ‘active‘;*/
// ali[num - 1].className = ‘active‘;
aliActive();

//给移动的图片添加active样式 同时也要消除其他li的样式 因此用for循环
}

/*封装aliActive*/
function aliActive() {
for (var i = 0; i < ali.length; i++) {
ali[i].className = ‘‘;
}
/* ali[this.index].className = ‘active‘; //this.index == num-1*/
ali[num - 1].className = ‘active‘;
}

/*切换下一张*/
nextBtn.onclick = function() {
imgChange();
}

 

/*切换上一张*/
prevBtn.onclick = function() {
num--;
if (num == 0) {
num = 9;
banner.style.left = -num * oimgW + ‘px‘;
banner.style.transition = ‘all 0s‘;
banner.style.webkitTransition = ‘all 0s‘;
num = 8;
}
setTimeout(function() {
banner.style.left = -num * oimgW + ‘px‘;
banner.style.transition = ‘all 1s‘;
banner.style.webkitTransition = ‘all 1s‘;
}, 0);
aliActive();
}

/*定时切换*/
var Timer = null;

function Move() {

Timer = setInterval(function() {
imgChange();
}, 2000)
}
/*封装的函数不会自动执行 因此要启动定时器*/
Move();

/*鼠标滑过清除滑动(定时器)*/
bannerWrap.onmouseover = function() {
clearInterval(Timer);
}
/*鼠标移出继续滑动(定时器) 因此封装定时切换*/
bannerWrap.onmouseout = function() {
Move();
}

/*滑动悬浮下标小圆点进行切换*/
for (var i = 0; i < ali.length; i++) { //遍历li
ali[i].index = i; //下标索引
ali[i].onmouseover = function() {
num = this.index + 1; //由于图片跟索引下标相差1 因此+1
aliActive();

banner.style.left = -num * oimgW + ‘px‘;
banner.style.transition = ‘all 1s‘;
banner.style.webkitTransition = ‘all 1s‘;
}
}
}

以上是关于面向对象无缝滚动轮播(附带面向过程代码)的主要内容，如果未能解决你的问题，请参考以下文章

无缝滚动轮播图

面向对象的方法来写轮播插件

Jquery+css实现图片无缝滚动轮播

js原生选项（包含无缝滚动轮播图）一

js原生选项（自动播放无缝滚动轮播图）二

jQuery无缝滚动轮播图