面向對象無縫滾動輪播(附帶面向過程代碼)
<!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"><</div>
<div class="btn next" id="next">></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‘;
}
}
}
面向對象無縫滾動輪播(附帶面向過程代碼)