使用原生js写轮播图效果

自学js一个月摸索出来的方法，第一次将我的代码上传到博客上面，方便以后查略总结。

html代码：

<ul id="box">
		<li>
			<ul id="pic">
				<li class="tu"><img src="imgs/1.png" alt=""></li>
				<li class="tu"><img src="imgs/2.jpg" alt=""></li>
				<li class="tu"><img src="imgs/3.jpg" alt=""></li>
				<li class="tu"><img src="imgs/4.jpg" alt=""></li>
			</ul>
		</li>
		<li>
			<ul id="btn">
				<li class="anniu">1</li>
				<li class="anniu">2</li>
				<li class="anniu">3</li>
				<li class="anniu">4</li>
			</ul>
		</li>
		<p id="btnr">right</p>
		<p id="btnl">left</p>
	</ul>

当我写完这段html代码的时候，我发现我的代码里面有很多冗余的元素和缺陷：
1.比如上面两个无序列表我都设置的id属性，其实这是没必要的，我们完全可以将其删除，使用父子选择器选着我们的元素。
2.正常网页中的轮播图都图片都是嵌套在a标签内部，我这里并没有将图片嵌套在a标签内部，这会造成某些不支持javascript的用户的浏览器无法正常使用，也就是所谓的没有达到平稳退化的要求。
小结：正常的轮播图大致的结构是这样，当我们遇到实际的问题时，需要做一些变动，且我现在还没有接触到真实的项目，需要学习的也还很多。

css代码：

<style>
		ul,li,img,p{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		img{
			width: 400px;
		}
		#box{
			width: 400px;
			height: 300px;
			position: relative;
			margin: 10px auto;
			box-shadow: 0 0 10px black;
		}
		#box li #pic{
			width: 100%;
			height: 100%;
		}
		#box li #pic li{
			position: absolute;
		}
		#box li #btn{
			width: 100px;
			height: 20px;
			position: absolute;
			left: 150px;
			bottom: 20px;
		}
		#box li #btn li{
			float: left;
			background: white;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			margin-right: 6.67px;
			text-align: center;
			line-height: 20px;
			cursor: pointer;
		}
		#box li #btn li:last-child{
			margin-right: 0;
		}
		#box p{
			width: 60px;
			height: 30px;
			background: rgba(0,0,0,.5);
			position: absolute;
			box-shadow: 0 0 10px black;
			color: white;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
		}
		#box p:hover{
			background: rgba(0,0,0,0.8);
		}
		#box p#btnr{
			right: 0;
			top: 130px;
		}
		#box p#btnl{
			left: 0;
			top: 130px;
		}
	</style>

javascript代码：

<script>
//定义一个中间数（我自己的说法）。
		var _index=0;
//定义一个空值，用来中断自动轮播。
		var timer=null;
//获取需要使用到的元素：
		var anniu=document.getElementsByClassName('anniu');
		var tu=document.getElementsByClassName('tu');
		var len=tu.length;
		var btnr=document.getElementById('btnr');
		var btnl=document.getElementById('btnl');
//定义点击事件：当btnr按下时，图片的索引自加1，并且当其与存储图片的数组长度相等时变成0。
		btnr.onclick=function(){
			clearInterval(timer);
			
			_index++;
			if(_index==len){
				_index=0;
			}
			for(var i=0;i<len;i++){
			 	tu[i].style.display="none";
			 	anniu[i].style.background="white";
			}
			tu[_index].style.display="block";
			anniu[_index].style.background="red";
			autoplay();
		}
//与上一步同理，这一次只不过是自减，当_index==0的时候，_index=len-1.
//这一步与上一步的结构一样，每次点击之前都需要结束自动轮播，当点击时间完成后，调用自动轮播.
		btnl.onclick=function(){
			clearInterval(timer);
			
			_index--;
			if(_index<0){
				_index=len-1;
			}
			for(var i=0;i<len;i++){
			 	tu[i].style.display="none";
			 	anniu[i].style.background="white";
			}
			console.log(_index);
			tu[_index].style.display="block";
			anniu[_index].style.background="red";
			autoplay();
		}
		//使用setInterval（）方法创建自动轮播效果：
		function autoplay(){
		//将函数赋值给timer。
			timer=setInterval(function(){	
			//_index自加1。
				_index++;
				//当_index==len的时候，_index=0。
				if(_index==len){
					_index=0;
				}
				//使用for循环，将所有图片设置成none.
				for(var i=0;i<len;i++){
				 	tu[i].style.display="none";
				 	anniu[i].style.background="white";
				 }
				 //设置当图片的索引值等于_index的时候显示.
				tu[_index].style.display="block";
				anniu[_index].style.background="red";
				
				},2000);
		}
	</script>