这是我的第二篇,有点小激动-优快云博客

本文链接：https://blog.youkuaiyun.com/myLoverIsYou_web/article/details/80373914
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			div.mask{width:508px ;height:206px ;margin:100px auto;position: relative;overflow: hidden;}
			ul{list-style: none;}
			ul.img{width: 700%;height: 206px;position: absolute;left: 0;top: 0;}
			ul.img li{float: left;}
			ul.img li img{width: 508px;height: 206px;}
			ul.arrow{position:absolute;left:0;top:50%;transform:translateY(-50%);width: 100%;font-size: 30px;text-align: center;color: white;}
			ul.arrow li{float: left;width: 50px;line-height: 50px;cursor: pointer;background-color:rgba(0,0,0,.8)}
			ul.arrow li:nth-child(1){float: right;}
			ul.point{width: 100px; height: 5px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}
			ul.point li{width:10px;height: 5px;border-radius: 10px;margin-left: 10px;float: left;background-color:rgba(255,0,0,.5) ;cursor: pointer;}
			ul.point li:nth-child(1){margin-left: 0;}
			ul.point li.active{transition:all 2s infinite;width: 20px;}
		</style>
	</head>
	<body>
		<div class="mask">
			<ul class="img">
				<li>
					<img src="../img/5b56fefbe2cd3901156b0e70979730da.png" alt="" />
				</li>
				<li><img src="../img/c22ff27949d96c8592b8c91514703ecd.jpg" alt="" /></li>
				<li><img src="../img/9fb97f15c5a219d7ffdd9ee8f26aa9cc.jpg" alt="" /></li>
				<li><img src="../img/136e244dcf4130d87633e3f6af7df94d.png" alt="" /></li>
				<li><img src="../img/1cea15a7acb21dd44df8a6ee3dd7ea45.jpg" alt="" /></li>
			</ul>
			<ul class="point">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul class="arrow aww">
				<li>></li>
				<li><</li>
			</ul>
		</div>
		
	</body>
	<script type="text/javascript" src="../js/move.js" ></script>
	<script>
		function getByclassName(classname){
			var arr=[];
			var doM=document.getElementsByTagName('*');
			for(var i=0;i<doM.length;i++){
				var index=doM[i];
				if(index.className.indexOf(classname)==0){
					arr.push(index);
				}
			}
			return arr;
		}
		function updatePoint(index){
			for(var i=0;i<getByclassName('point')[0].children.length;i++){
				getByclassName('point')[0].children[i].className='';
			}
			getByclassName('point')[0].children[index].className='active';
		}
		window.οnlοad=function(){
			var tt=new aPisplay();
		}
		1、把嵌套函数抽出来。
                    函数不能嵌套,把函数拆分出来:利用原型:(property.属性)将他们分出来;
                    变量变成全局变量
            2、去掉onload,写上ｔｈｉｓ
                    分清this的对象是谁,是这个方法还是这个对象!
		function aPisplay(){//构造函数
			/*封装的getbyclassname开始*/
			
			/*封装的getbyclassname结束*/
			this.oArrow=getByclassName("arrow")[0];//自己封装的getclassname;
			this.oPoint=getByclassName('point')[0];
			this.oIMG=getByclassName('img')[0];
			this.oMask=getByclassName('mask')[0];
			this.oIMG.now=0;
			/*克隆图片开始*/
			/*var liFirst=oIMG.children[0].cloneNode(true);
			var liLast=oIMG.children[4].cloneNode(true);
			oIMG.appendChild(liFirst);
			oIMG.insertBefore(liLast,oIMG.children[0]);*/
			//console.log(liFirst,liLast);
//			oIMG.style.left=-oMask.offsetWidth+'px';
			/*克隆图片结束*/
			/*单击实现转换开始*/
			var _this=this;
			this.len=this.oIMG.children.length;
			this.oArrow.children[0].οnclick=function(){
				_this.click1();
			}
			
			this.oArrow.children[1].οnclick=function(){
				_this.click2();
			}
			/*单击实现转换结束*/
			/*单击点的转换开始*/
			/*单击开始*/
			this.init();
			/*单击结束*/
			/*单击点的转换结束*/
			/*自动播放开始*/
			this.autoPlay();
			/*自动播放结束*/
			/*鼠标移动在Omask上面时停止播放开始*/
			this.oMask.οnmοuseenter=function(){
				_this.mouseenter();
			}
			this.oMask.οnmοuseleave=function(){
				_this.mouseleave();
			}
			/*鼠标移动在Omask上面时停止播放结束*/
		}
		aPisplay.prototype.mouseleave=function(){
				this.autoPlay();
		}
		aPisplay.prototype.mouseenter=function(){
			clearInterval(this.oIMG.time);
		}
		aPisplay.prototype.click1=function(){
			if(this.oIMG.now==this.len-1){
				this.oIMG.now=0;
				startMove(this.oIMG,{left:0});
				updatePoint(this.oIMG.now);
			}else{
				this.oIMG.now++;
				this.current=this.oIMG.offsetLeft;
				this.target=this.oIMG.now*this.oMask.offsetWidth;
				this.dis=Math.abs(this.target)-Math.abs(this.current);
				startMove(this.oIMG,{left:-this.dis+this.current});
				//console.log(this.oArrow.children[0]);
				updatePoint(this.oIMG.now);
			}
			
		}
		aPisplay.prototype.click2=function(){
			if(this.oIMG.now==0){
					this.oIMG.now=this.len-1;
					startMove(this.oIMG,{left:-this.oIMG.now*this.oMask.offsetWidth});
					updatePoint(this.oIMG.now);
				}else{
					this.oIMG.now--;
					this.current=this.oIMG.offsetLeft;
					this.target=this.oIMG.now*this.oMask.offsetWidth;
					this.dis=Math.abs(this.target)-Math.abs(this.current);
					startMove(this.oIMG,{left:-this.dis+this.current});
					updatePoint(this.oIMG.now);
				}
		}
		
		aPisplay.prototype.init=function(){
			var _this=this;
				for(var i=0;i<this.oIMG.children.length;i++){
					this.oPoint.children[i].index=i;
					this.oPoint.children[i].οnclick=function(){
						_this.click3(this);
				}
			}
		}
		aPisplay.prototype.click3=function(str){
			updatePoint(str.index);
			startMove(oIMG,{left:-str.index*this.oMask.offsetWidth});
			oIMG.now=str.index;
		}
		aPisplay.prototype.autoPlay=function(){
			var _this=this;
			clearInterval(this.oIMG.time);
			this.oIMG.time=setInterval(function(){
				_this.click1();
			},3000)
		}
	</script>
</html>