面向对象淡入淡出轮播图(附带面向过程)

最新推荐文章于 2024-09-09 09:35:48 发布

bangai2527

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量158

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LiangTianFu/p/8040704.html

版权

<!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>

</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

转载于:https://www.cnblogs.com/LiangTianFu/p/8040704.html

bangai2527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象淡入淡出轮播图(附带面向过程)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> </body></body><title>面向对象淡入淡出轮播</title><link rel="stylesheet" type="text/css" hre...
复制链接

扫一扫