js面向对象轮播图写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
ul,li{list-style: none}
#banner{width:800px;height: 400px;margin:40px auto;position: relative;overflow: hidden;}
#banner>ul{position: absolute;}
#banner>ul>li{float: left}
#banner>ul>li>img{width:800px;height: 400px;}
#direction>a{position: absolute;width:80px;height: 40px;background:rgba(0,0,0,.6);color:#fff;text-decoration: none;font-size: 30px;top:180px;text-align: center}
#direction>a:nth-child(2){right:0;}
#btn{position: absolute;bottom: 10px;left:42%;}
#btn>a{float: left;margin-left: 5px;width:20px;height: 20px;background: #fff;border-radius: 50%}
#btn>.active{background: #c33;}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<div id="direction">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="##" class="active"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</div>
</body>
</html>
<script src="pool.js"></script>
<script>
//获取元素
/*var banner = document.getElementById("banner");
//获取ul因为TagName获得的是一个数组，所以获得第0个
var oUl = banner.getElementsByTagName("ul")[0];
var aLi = banner.getElementsByTagName("li");
var aBtn =document.querySelectorAll("#btn>a");
var iW = aLi[0].offsetWidth;
var li = aLi[0].cloneNode(true);
var iNow = 0;
var timer = null;
//先插入克隆的元素在去设置ul的宽度
oUl.appendChild(li);
oUl.style.width = aLi.length*iW+"px";
//移入的时候轮播图停止
banner.onmouseover = function(){
clearInterval(timer)
}
//移除的时候轮播图继续运行
banner.onmouseout = function(){
autoPlay()
}
//当做完自动轮播的时候要先去做移入的时候轮播停止 移除的时候轮播继续运行
autoPlay()
//自动轮播
function autoPlay(){
timer = setInterval(function(){
if(iNow == aLi.length-1){
iNow = 1;
oUl.style.left = 0;
}else{
iNow++;
}
toImg()
},3000)
}
//运动的原理
function toImg(){
move(oUl,{left:-iNow*iW})
for(var i=0;i<aBtn.length;i++){
aBtn[i].className = "";
}
aBtn[iNow>3?0:iNow].className = "active";
}
*/
function Banner(){
this.banner = document.getElementById("banner");
this.oUl = this.banner.getElementsByTagName("ul")[0];
this.aLi = this.banner.getElementsByTagName("li");
this.iW = this.aLi[0].offsetWidth;
this.li = this.aLi[0].cloneNode(true);
this.iNow = 0;
this.timer = null;
this.init();
}
Banner.prototype.init = function(){
this.oUl.appendChild(this.li);
this.oUl.style.width = this.aLi.length*this.iW+"px";
this.hover();
this.autoPlay();
}
Banner.prototype.hover = function(){
var _this = this;
this.banner.onmouseover = function(){
clearInterval(_this.timer)
}
this.banner.onmouseout = function(){
_this.autoPlay()
}
}
Banner.prototype.autoPlay = function(){
var _this = this;
this.timer = setInterval(function(){
if(_this.iNow == _this.aLi.length-1){
_this.iNow = 1;
_this.oUl.style.left = 0;
}else{
_this.iNow++;
}
_this.toImg()
},3000)
}
Banner.prototype.toImg = function(){
move(this.oUl,{left:-this.iNow*this.iW})
}
var banner = new Banner();
</script>
