用js实现简易轮播图

        之前一直觉得自己技术菜学的东西基础没必要写技术性博客，但我发现我错了。博客是用来记录最近所学和遇到的坑又是怎么样填的坑的一种总结，当然也有可能有很多小白和我一样，为一些在别人看来很基础的东西而烦恼，曾n次被学长说应该多写写技术性博客，就从现在开始吧，多写多记多敲。这次记录一下前段时间写的一个简易轮播图。

        很多小白可能和我一样曾经为轮播图为苦恼，然而一路走来，见识了各式各样的轮播图，也发现实现轮播图的方法有很多，只要你敢想，你就能做出不一样的效果来。今天为大家分享一种简易轮播图及其代码，也算是为自己做个总结。 

        如今在很多网站上我们都会看到轮播图的身影，如：

        今天就分享一下这种轮播图。

        下面插入HTML代码：

<div class="lunbo">
			<ul class="lunboBig">
				<!--大区域轮播图-->
				<li class="imgContent" style="display: block;">
					<img src="images/85.jpg">
					<div class="text">向往土耳其的棉花堡？国内有同款，知道的人还不多哦！</div>
				</li>
				<li class="imgContent">
					<img src="images/86.jpg">
					<div class="text">四川话客服时薪高达700？我要去学语言了！</div>
				</li>
				<li class="imgContent">
					<img src="images/87.jpg">
					<div class="text">摄影师带你看冬季贝加尔湖蓝冰，摩尔曼斯克极光之旅</div>
				</li>
				<li class="imgContent">
					<img src="images/88.jpg">
					<div class="text">粉色沙滩、科莫多龙，这个免签小岛，看一眼就被种草！~</div>
				</li>
			</ul>
			<ul class="lunboSmall">
				<!--右侧小区域轮播图-->
				<li class="imgLink" style="border-color: #f80;">
					<img src="images/85.jpg">
				</li>
				<li class="imgLink">
					<img src="images/86.jpg">
				</li>
				<li class="imgLink">
					<img src="images/87.jpg">
				</li>
				<li class="imgLink">
					<img src="images/88.jpg">
				</li>
			</ul>
		</div>

         接着是css代码： 

 * {
				padding: 0;
				margin: 0;
			}
			
			body {
				min-width: 1300px;
			}
			
			.lunbo {
				/*轮播图*/
				width: 100%;
				height: 570px;
				position: relative;
			}
			
			.lunbo img {
				width: 100%;
				height: 100%;
			}
			
			.lunboBig {
				/*大区域轮播图*/
				width: 100%;
				height: 100%;
				list-style-type: none;
				overflow: hidden;
				position: relative;
			}
			
			.lunboBig .imgContent {
				/*大图*/
				float: left;
				width: 100%;
				height: 100%;
				position: relative;
				display: none;
			}
			
			.lunboBig .imgContent .text {
				/*每张图的文字区域*/
				color: white;
				font-size: 30px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -400px;
				margin-top: -200px;
			}
			
			.lunboSmall {
				/*小区域轮播图*/
				position: absolute;
				left: 50%;
				top: 85px;
				margin-left: 445px;
				z-index: 3;
			}
			
			.lunboSmall .imgLink {
				/*小图*/
				list-style-type: none;
				width: 120px;
				height: 70px;
				border: 2px solid transparent;
			}

        最后是js代码：

window.onload = function() {
				var imgLink = document.getElementsByClassName("imgLink");
				var imgContent = document.getElementsByClassName("imgContent");
				//设置初始值
				var index = 0;
				//设置定时器
				timer = setInterval(lun, 2000);

				function lun() {
					index++;
					//遍历
					for(var j = 0; j < imgContent.length; j++) {
						imgContent[j].style.display = "none";
					}
					for(var j = 0; j < imgLink.length; j++) {
						imgLink[j].style.borderColor = "";
					}
					//索引位置显示
					imgContent[index].style.display = "block";
					imgLink[index].style.borderColor = "#f80";

					//判断当前索引是否是最后一个
					if(index >= imgLink.length - 1) {
						//则将index设置为-1
						index = -1;
					}
				}

                //上面为自动轮播，但很多时候我们需要手动轮播，以下实现手动轮播

				for(var i = 0; i < imgLink.length; i++) {
					//为每一个imgLink都添加一个num属性
					imgLink[i].num = i;
					//绑定单击响应函数
					imgLink[i].onclick = function() {
						//关闭定时器
						clearInterval(timer);
						//获取点击的索引,并将其设置为index	
						index = this.num;

						for(var j = 0; j < imgContent.length; j++) {
							imgContent[j].style.display = "none";
						}
						for(var j = 0; j < imgLink.length; j++) {
							imgLink[j].style.borderColor = "";
						}

						imgContent[index].style.display = "block";
						imgLink[index].style.borderColor = "#f80";

						timer = setInterval(lun, 2000);
					}
				}

			};

        其中上半部分实现的是自动轮播，我们可以发现，只需要简单的遍历一遍，让大图的display为none，所有小图的边框颜色为空，然后给所轮播到的图添加上样式，如此便有个基本框架了。当然这里我们需要设置定时器，进而实现轮播。而第四张图轮播到下一张要跳到第一张继续轮播，所以这里我们做了个if判断来衔接。

        而要做到手动轮播，思路也很简单。我们需要给小图绑定单击响应函数，当点击小图时，清除定时器以起到暂停轮播的作用，同样遍历一遍，给所点图片添加样式，最后用定时器继续轮播。

        如此，简易轮播图便可大功告成了。欢迎大佬给建议，欢迎和我一样的小白一同探讨。我会再接再厉。