Tetegw
4/8/2018 - 3:46 AM
轮播图
原生js 面向对象 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr,#arr1 {
display: none;
}
#arr span,#arr1 span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr .next,#arr1 .next {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span class="prev"><</span><span class="next">></span></div>
</div>
<div class="all" id='box1'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr1"><span class="prev"><</span><span class="next">></span></div>
</div>
<script src="../animate.js"></script>
<script>
function Slider(options) {
this.init(options);
this.default = {};
}
Slider.prototype = {
constructor: Slider,
init: function(options) {
var _this = this;
this.box = document.querySelector(options.wrap);
this.screen = this.box.querySelector(options.inner);
this.ul = this.screen.querySelector('ul');
this.liList = this.ul.querySelectorAll('li');
this.ol = this.screen.querySelector('ol');
this.arr = document.querySelector(options.arr);
this.prev = this.arr.querySelector('.prev');
this.next = this.arr.querySelector('.next');
this.screenW = this.screen.offsetWidth;
//创建ol下的li,设置第一个高亮
for (var i = 0; i < this.liList.length; i++) {
var li = document.createElement('li');
li.innerHTML = i + 1;
this.ol.appendChild(li);
};
this.olList = this.ol.querySelectorAll('li');
this.olList[0].classList.add('current');
//克隆liList第一个
this.ul.appendChild(this.liList[0].cloneNode(true));
this.pic = 0;
this.fk = 0;
this.simple();
this.complete();
this.timer = setInterval(function() {
_this.nextF();
}, 1000);
},
simple: function() {
//简单轮播图
var _this = this;
this.olList.forEach(function(value, index) {
value.addEventListener('click', (function(index) {
return function() {
_this.olList.forEach(function(val) {
val.classList.remove('current');
});
this.classList.add('current');
animate(_this.ul, -index * _this.screenW);
_this.fk = _this.pic = index;
}
})(index));
});
},
complete: function() {
var _this = this;
//左右焦点图
this.box.addEventListener('mouseenter', function() {
_this.arr.style.display = 'block';
clearInterval(_this.timer);
});
this.box.addEventListener('mouseleave', function() {
_this.arr.style.display = 'none';
_this.timer = setInterval(function() {
_this.nextF();
}, 1000);
});
//上一页
this.prev.addEventListener('click', function() {
_this.prevF();
});
//下一页
this.next.addEventListener('click', function() {
_this.nextF();
});
},
prevF: function() {
var _this = this;
if (this.pic <= 0) {
this.pic = this.liList.length;
this.ul.style.left = -this.pic * this.screenW + 'px';
};
this.pic--;
animate(this.ul, -this.pic * this.screenW);
//小方块
this.fk--;
if (this.fk < 0) {
this.fk = this.olList.length - 1;
};
this.olList.forEach(function(val) {
val.classList.remove('current');
});
this.olList[this.fk].classList.add('current');
},
nextF: function() {
var _this = this;
if (this.pic >= this.liList.length) {
this.pic = 0;
this.ul.style.left = -this.pic * this.screenW + 'px';
};
this.pic++;
animate(this.ul, -this.pic * this.screenW);
//小方块
this.fk++;
if (this.fk > this.olList.length - 1) {
this.fk = 0;
};
this.olList.forEach(function(val) {
val.classList.remove('current');
});
this.olList[this.fk].classList.add('current');
},
}
var slider = new Slider({
wrap:'#box',
inner:'.screen',
arr:'#arr',
});
var slider2 = new Slider({
wrap:'#box1',
inner:'.screen',
arr:'#arr1',
});
</script>
</body>
</html>