网易云轮播图

感觉轮播图运用的挺多，几乎每个网站上都有。所以做了个简单的网易云海报轮播。
css自己看着写就好啦。说白了就是元素的隐藏和循环，主要代码如下：

		var lis = document.getElementsByTagName('li');
		var bigimg = document.getElementById('bigimg').getElementsByTagName('img')[0];
		var h3 = document.getElementsByTagName('h3')[0];
		var mask = document.getElementsByClassName('mask');
		var border = document.getElementsByClassName('border');
		var gv = 0;
		var t;

		//鼠标移动，图片滚动
		for(var i = 0;i<lis.length;i++){
			(function(key) {
				lis[i].addEventListener("mouseover",function(){
					clearInterval(t);
					bigimg.src = './images/'+'table' +key +'.png';
					h3.innerHTML = '网易云推荐' + key;
					for(var j = 0; j<mask.length; j++){
						mask[j].style.display = "block";
					}
					mask[key-1].style.display = "none";
					for(var k=0;k<border.length;k++){
						border[k].style.display="none";
					}
					border[key-1].style.display = "block";
					gv = key;
				});

				lis[i].addEventListener('mouseout',function(){
					t = setInterval(autoplay,1800);
				});

			})(i+1);
		}


		//自动轮播图片。需要使用到定时器控制
		function autoplay(){
			gv = gv%7;
			gv++;
			bigimg.src = './images/'+'table' + gv +'.png';
			h3.innerHTML ='网易云推荐' + gv ;

			for(var j=0;j<mask.length;j++){
				mask[j].style.display ="block";
			}

			mask[gv-1].style.display ="none";
			for(var k=0;k<border.length;k++){
				border[k].style.display ="none";
			}

			border[gv-1].style.display ="block";

		}

		t=setInterval(autoplay,1800);

html代码：

<div class="main">
	    <div class="bigimg" id="bigimg">
		    <img src="./images/table1.png" alt="">
		    <h3>网易云推荐1</h3>
	    </div>
	    <div class="smalling" id="smalling">
		    <ul>
			    <li>
				    <span class="border" style="display: block;"></span>
				    <span class="mask" style="display: none;"></span>
			    </li>
			    <li>
				    <span class="mask"></span>
				    <span class="border"></span>
			    </li>
			    <li>
				    <span class="mask"></span>
				    <span class="border"></span>
				</li>
			    <li>
				    <span class="mask"></span>
				    <span class="border"></span>
			    </li>
			    <li>
				    <span class="mask"></span>
				    <span class="border"></span>
			    </li>
			    <li>
				    <span class="mask"></span>
				    <span class="border"></span>
			    </li>
			    <li>
				    <span class="mask"></span>
				    <span class="border"></span>
			    </li> 
		    </ul>
	    </div>
	</div>