封装一个无缝图片轮播组件

图片轮播在我们的前端开发中是非常常见的，下面是自己写的一个图片轮播组件，支持自动轮播，手动轮播，无缝衔接。

dom结构

首先是dom结构，将所有内容放入一个大盒子，应用ul标签存放图片列表，圆点定位图片位置。

	                <div id="box">
				<ul id="banners">
					<li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
					<li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
					<li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
					<li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
					
				</ul>
				<ul class="num">
					<li class="on"></li>
				</ul>
					<div class="btns btn_l"><</div>
					<div class="btns btn_r">></div>
			</div>

下面是盒子样式，这里使用百分比自适应，大盒子使用overflow: hidden;防止图片溢出，将ul宽设置为图片总宽度+1（这里+1后面会有用到）。

 #box{
	width:100%;
	height:40.0em;
	overflow: hidden;
	position: absolute;
}
 #box #banners{
	width:500%;
	position: relative;
}
 #box .banners-img{
	float: left;
	width:20%;
	height:40.0em;
}
 #box .banners-img img{
	width:100%;
	height: 100%;
}

 .num{

	width:10%;
	height:2.0em;
	position: relative;
	top: 82%;
	left: 40%;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform:rotate(-90deg);
}
 .num li{
	width:2.0em;
	height:100%;
	position: relative;
	border-radius: 50%;
	background-color: grey;	
}
 .num .on{
	background-color: black;
}
		
 .btns{
	width:1.0em;
	height:1.0em;
	background-color: rgba(0,0,0,0.5);
	position:relative;
	top:50%;
	color: white;
	font-size: 3.0em;
	text-align: center;
	line-height: 1.0em;
	cursor: pointer;
	display: none;
}
 #box:hover .btns{
	display: block;
}
 .btn_l{
	left: 0;
}
 .btn_r{
	right:0;
}

组件使用jquery编写

	        function addImg(item,arrSrc){  //添加图片，这里需同时修改样式，读者可自行修改
                    for(let i = 0;i<item;i++){
                    item[i].attr('src',arrSrc[i]);
                        }
                    }
                var srcs = ['img/DSC_1913.JPG','img/DSC_1914.JPG','img/DSC_1915.JPG','img/DSC_1916.JPG'];
                addImg($('.banners-img img'),srcs);

		var Clone = $("#banners li").first().clone();
		//追加一张图片，轮到最后一张时能够自然过渡，这里初学者需慢慢体会
		$("#banners").append(Clone);
		var Size = $("#banners li").size();
		//alert(Size);
		for(var j=0;j<Size-2;j++){
			$(".num").append("<li></li>");
			}
				
		//获取图片宽度
		var imgWidth = parseInt($("#banners .banners-img").css("width"));
		//因宽度为百分比，窗口大小变化时需重新获取
		window.onresize = function(){
			var newWidth = $("#banners .banners-img").css("width");
				        imgWidth = parseInt(newWidth);
				}
		//鼠标移到按钮时轮播
		$(".num li").hover(function(){
			var index = $(this).index();
				i=index;
			$("#box #banners").stop().animate({left:-i*imgWidth},500);
			$("#box .num li").eq(i).addClass("on")
				.siblings().removeClass("on");
				
			})
				//自动轮播
				var t = setInterval(function(){
					i++;
					move();
				},3000);
				//鼠标移入时停止自动轮播
				$("#box").hover(function(){
					clearInterval(t);
				},function(){
					t = setInterval(function(){
					i++;
					move();
				},3000);
				})
				
				//手动轮播
				$("#box .btn_l").click(function(){
					i--;
					move();
				});
				
				$("#box .btn_r").click(function(){
					i++;
					move();
				});
				

				//封装一个运动函数
			//	alert(imgWidth);
				function move(){
					if(i==Size){ //当轮播到最后一张时过渡到第一张图片
						$("#box #banners").css({left:0});
						i=1;
					}
					if(i==-1){
						$("#box #banners").css({left:-(Size-1)*imgWidth});
						i=Size-2;
					}
					$("#box #banners").stop().animate({left:-i*imgWidth},500);
					if(i==Size-1){
						$("#box .num li").eq(0).addClass("on")
					.siblings().removeClass("on");
					}else{
						$("#box .num li").eq(i).addClass("on")
					.siblings().removeClass("on");
					}
					
				}