“纸上得来终觉浅，觉知此事要躬行”——博客起始

一直想开个博客，写下自己学习的过程，在今天终于把这件事开始了。自己对于前端的理解，再加之从事这个行业，都是很有缘分的事。
在信息化爆炸的这个时代，互联网的变化更是特别迅速。我觉得HTML是地基，JS是设计图，CSS是装饰。
今天，给大家分享一个轮播图的实现。它可以通过点击下面的方块，或者是左右的按钮，使得图片进行移动，达到轮播的效果。

这是HTML部分：

<div id="box1">
			<img />
			<a class="left"><</a>
			<a class="right">></a>
			<ul class="page">
				<!--<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>-->
			</ul>
		</div>
		<div id="box2">
			<img />
			<a class="left"><</a>
			<a class="right">></a>
			<ul class="page">
				<!--<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>-->
			</ul>
		</div>

这是CSS部分：

<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box1,#box2{
			height:200px;
			width: 300px;
			position: relative;
			margin: 20px auto;
			margin-top: 60px;
		}
		img{
			height:200px;
			width: 300px;
			position: absolute;
		}
		a{
			text-decoration: none;
			height: 24px;
			width: 24px;
			background: #ccc;
			top:50%;
			margin-top: -14px;
			position: absolute;
		}	
		.left{
			left:0;
		}
		.right{
			right: 0;
		}
		.page{
			height: 36px;
			width:auto;
			/*background: #ccc;*/
			position:absolute;
			bottom: -44px;
			left: 26%;
				
			}
		li{
				height: 30px;
				width: 30px;
				background: #ccc;
				list-style: none;
				margin-left: 10px;
				float: left;
			}
		li.cur{
				background: cornflowerblue;
			}
			
		</style>

这是JS部分：

<script>
			
		function fn(id,arr){
			var box=document.getElementById(id),
			    img=box.getElementsByTagName('img')[0],
			    oA=box.getElementsByTagName('a'),
			    ul=box.getElementsByTagName('ul')[0],
			    oLi=ul.getElementsByTagName('li');

			var num=0;
			    for(var i=0;i<arr.length;i++){
			   	 ul.innerHTML+='<li></li>';
			   }
			   
			   function clear(){
			   	 for(var i=0;i<oLi.length;i++){
			   	 	oLi[i].className='';
			   	 }
			   }
			   clear();
			   
			   function fn(){
			   		img.src=arr[num];
			   		oLi[num].className='cur';
			   	}
			    fn();
			   
			   oA[1].function(){
			   	  num++;
			   	  if(num==arr.length){
			   	  	num=0;
			   	  }
			   	  clear();
			   	  fn();
			   }
			   oA[0].function(){
			   	num--;
			   	if(num<0){
			   		num=arr.length-1;
			   	}
			   	clear();
			   	fn();
			   }
			   
			  for(var i=0;i<oLi.length;i++){
		    	oLi[i].index=i;
		    	oLi[i].function(){
			    	 clear();
			    	 img.src=arr[this.index];
			    	 oLi[this.index].className='cur';
			    	 num=this.index;
		    	}
		    }
	   }
		
	    fn('box1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']);	
	    fn('box2',['img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg']);	
		</script>

文章的结尾，第一篇博客可能就是自己的一个从无理到有序的开端。我希望自己多去记录，自己所喜欢的东西，能跟业界各个小伙伴，互相成长。