圖片輪播在我們的前端開發中是非常常見的，下面是自己寫的一個圖片輪播元件，支援自動輪播，手動輪播，無縫銜接。

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");
					}
					
				}