利用面向对象编写无缝轮播图，需要三步走。
1、OOA 对轮播图进行分析
- 选定元素
- 绑定事件
- 修改索引
- 通过索引实现图片的播放
2、OOD 对轮播图功能块进行设计
3、OOP 详细地对功能块进行补充以达到最终目的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面向对象的轮播图</title>
<style type="text/css">
.cont{width: 1130px;height: 300px;margin: 50px auto;position:relative;overflow: hidden;}
.imgbox{width: 5650px;position: absolute;left: 0;top: 0;}
.imgbox a{float: left;width: 1130px;height: 300px;}
.imgbox a img{width: 1130px;height: 300px;display: block;}
.btns input{width: 50px;height: 50px;border: none;background: rgba(200,200,200,0.6);position: absolute;top: 125px;z-index: 9999999;}
#prev{left: 0;}
#next{right: 0;}
</style>
</head>
<body>
<div class="cont">
<div class="imgbox">
<!-- <a href=""><img src="https://img.zcool.cn/community/0174f85b8422f2a8012190f2b97fa9.png@1380w"/></a> -->
<a href=""><img src="https://img.zcool.cn/community/01c4005b863607a80120245cc788a1.jpg@1380w"/></a>
<a href=""><img src="https://img.zcool.cn/community/01eb7b5b85ff52a80120245c031a6b.jpg@1380w"/></a>
<a href=""><img src="https://img.zcool.cn/community/01327f5b8422c7a80120577d2aa796.png@1380w"/></a>
<a href=""><img src="https://img.zcool.cn/community/0174f85b8422f2a8012190f2b97fa9.png@1380w"/></a>
<a href=""><img src="https://img.zcool.cn/community/01c4005b863607a80120245cc788a1.jpg@1380w"/></a>
</div>
<div class="btns">
<input type="button" name="" id="prev" value="<<<" />
<input type="button" name="" id="next" value=">>>" />
</div>
</div>
</body>
<script src="move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//OOA
/*
1、选元素
2、绑定事件
3、改变索引
4、根据索引切换图片
*/
//OOD
function Banner(){
this.cont = document.querySelector('.cont');
this.next = document.querySelector('#next');
this.prev = document.querySelector('#prev');
this.imgBox = document.querySelector('.imgbox');
this.img = this.imgBox.children;
this.index = 0;
this.init()
}
Banner.prototype.init = function(){
var that = this;
this.next.onclick = function(){
that.changeIndex("right")
}
this.prev.onclick = function(){
that.changeIndex("left")
}
}
Banner.prototype.changeIndex = function( direction ){
if(direction == 'right'){
if( this.index == this.img.length - 1){
this.index = 1;
this.imgBox.style.left = 0;
}else{
this.index++;
}
}else{
if( this.index == 0){
this.index = this.img.length-2;
this.imgBox.style.left = -this.img[0].offsetWidth * (this.index+1) + 'px';
console.log( this.index)
}else{
this.index--;
// console.log( this.index)
}
}
this.move();
}
Banner.prototype.move = function(){
move(this.imgBox,{'left':-this.img[0].offsetWidth*this.index})
}
new Banner();
//OOP
</script>
</html>
网友评论