<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</body>
</body>
<title>面向對象淡入淡出輪播</title>
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
</head>
<body>
<div id="banner_wrapper" class="banner_wrapper">
<div id="banner" class="banner">
<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="廣告圖">
</div>
<div id="prev" class="btn prev"></div>
<div id="next" class="btn next"></div>
面向過程和面向對象。 <ul id="circle" class="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>
?
什么是面向對象什么是面向過程，css代碼：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
font-size: 14px;
background: #dcd8de;
}
.banner_wrapper {
position: relative;
width: 830px;
height: 440px;
margin: 100px auto;
}
.banner_wrapper .banner {
width: 100%;
height: 440px;
}
.banner_wrapper .banner img {
position: absolute;
width: 100%;
height: 440px;
transition: 1s;
opacity: 0;
}
.banner_wrapper .btn {
position: absolute;
top: 50%;
width: 35px;
height: 80px;
margin-top: -40px;
background: url(../images/btn.png) no-repeat;
cursor: pointer;
opacity: 0.7;
display: none;
}
.banner_wrapper:hover .btn {
display: block;
}
.banner_wrapper .btn:hover {
opacity: 1;
}
.banner_wrapper .prev {
left: 0;
background-position: -73px 0;
}
.banner_wrapper .next {
right: 0;
background-position: 0 0;
}
.banner_wrapper .circle {
position: absolute;
bottom: 20px;
left: 40%;
background: hsla(0, 0%, 100%, 0.5);
padding: 5px;
border-radius: 12px;
}
.banner_wrapper .circle li {
width: 15px;
height: 15px;
background: #fff;
float: left;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.banner_wrapper li.active {
background: orange;
}
?
面向對象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');
this.prevBtn = document.getElementById('prev');
this.nextBtn = document.getElementById('next');
this.circle = document.getElementById('circle');
this.ali = circle.getElementsByTagName('li');
this.num = 0;
this.Timer = null;
//初始化
this.oimg[0].style.opacity = "1";
this.ali[0].className = "active";
this.nextBtn.onclick = function() {
_this.nextClick(this)
}
this.prevBtn.onclick = function() {
_this.prevClick(this)
}
/*定時切換*/
autoPlay = function() {
_this.autoPlay(this)
}
/*封裝的函數不會自動執行 因此要啟動定時器*/
_this.autoPlay(this)
/*鼠標滑過清除滑動(定時器)*/
bannerWrapper.onmouseover = function() {
clearInterval(_this.Timer);
}
/*鼠標移出繼續滑動(定時器) 因此封裝定時切換*/
bannerWrapper.onmouseout = function() {
_this.autoPlay(this)
}
/*什么元素用什么事件實現什么功能*/
/*點擊懸浮下標小圓點進行切換*/
for (var i = 0; i < this.ali.length; i++) { //循環遍歷每一個按鈕
this.ali[i].index = i; //下標索引
this.ali[i].onclick = function() {
_this.aliClick(this)
}
}
}
Banner.prototype.nextClick = function() {
this.num++;
if (this.num == 8) {
this.num = 0;
this.ali[this.num].className = "";
this.oimg[this.num].style.opacity = "0";
}
for (var i = 0; i < this.ali.length; i++) {
this.ali[i].className = '';
this.oimg[i].style.opacity = "0"
}
this.ali[this.num].className = 'active';
this.oimg[this.num].style.opacity = "1";
}
Banner.prototype.prevClick = function() {
this.num--;
if (this.num == -1) {
this.num = 7;
this.ali[this.num].className = "";
this.oimg[this.num].style.opacity = "0";
}
for (var i = 0; i < this.ali.length; i++) {
this.ali[i].className = '';
this.oimg[i].style.opacity = "0"
}
this.ali[this.num].className = 'active';
this.oimg[this.num].style.opacity = "1";
}
Banner.prototype.aliClick = function(oLi) {
for (var i = 0; i < this.ali.length; i++) {
this.ali[i].className = "";
this.oimg[i].style.opacity = "0";
}
this.num = oLi.index;
oLi.className = "active";
this.oimg[this.num].style.opacity = "1";
}
Banner.prototype.autoPlay = function() {
var _this = this;
_this.Timer = setInterval(function() {
_this.nextClick(this)
}, 3000)
}
?
?
面向過程js代碼：
window.onload = function() {
var bannerWrapper = document.getElementById('banner_wrapper');
var banner = document.getElementById('banner');
var oimg = banner.getElementsByTagName('img');
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
var circle = document.getElementById('circle');
var ali = circle.getElementsByTagName('li');
var num = 0;
//初始化
oimg[0].style.opacity = "1";
ali[0].className = "active";
nextBtn.onclick = function() {
num++;
if (num == 8) {
num = 0;
ali[num].className = "";
oimg[num].style.opacity = "0";
}
for (var i = 0; i < ali.length; i++) {
ali[i].className = '';
oimg[i].style.opacity = "0"
}
ali[num].className = 'active';
oimg[num].style.opacity = "1";
}
prevBtn.onclick = function() {
num--;
if (num == -1) {
num = 7;
ali[num].className = "";
oimg[num].style.opacity = "0";
}
for (var i = 0; i < ali.length; i++) {
ali[i].className = '';
oimg[i].style.opacity = "0"
}
ali[num].className = 'active';
oimg[num].style.opacity = "1";
}
/*定時切換*/
var Timer = null;
function Move() {
Timer = setInterval(function() {
num++;
if (num == 8) {
num = 0;
ali[num].className = "";
oimg[num].style.opacity = "0";
}
for (var i = 0; i < ali.length; i++) {
ali[i].className = '';
oimg[i].style.opacity = "0"
}
ali[num].className = 'active';
oimg[num].style.opacity = "1";
}, 3000)
}
/*封裝的函數不會自動執行 因此要啟動定時器*/
Move();
/*鼠標滑過清除滑動(定時器)*/
bannerWrapper.onmouseover = function() {
clearInterval(Timer);
}
/*鼠標移出繼續滑動(定時器) 因此封裝定時切換*/
bannerWrapper.onmouseout = function() {
Move();
}
/*什么元素用什么事件實現什么功能*/
//淡入淡出 /*點擊懸浮下標小圓點進行切換*/
for (var i = 0; i < ali.length; i++) { //循環遍歷每一個按鈕
ali[i].index = i;
ali[i].onclick = function() {
num = this.index;
for (var j = 0; j < ali.length; j++) {
ali[j].className = "";
oimg[j].style.opacity = "0";
}
this.className = "active";
oimg[num].style.opacity = "1";
}
}
}
?
代碼演示地址：?https://liangtianfu.github.io/Object-FadeBanner/demo.html
