JQ無縫輪播分享，極簡版

JQ輪播主體結構

三層結構

最外層：一個div盒子，給定寬度，也可以後期通過js給寬度，并添加有overflow：hidden屬性，因為這是輪播的區域，而輪播的總寬度大于此寬度
  第二層：也是個div盒子，這是輪播内容的直接父級，此盒子的寬度不給（或者給定一個足夠大的寬度，如：99999px），沒給寬度的情況下，通過js，根據輪播内容動态的給予寬度，此盒子需要定位（position:relative）
  最内層：多個所需輪播的div盒子，此盒子給定寬度，或者不給寬度由内容撐寬，需要給浮動，或者在第二層給屬性display：flex，使用flex布局
  
  **注意**：如果要寫無縫輪播，需要将第一個輪播盒子，也在最後複制一次
           

無縫輪播示範

html：
           

<div class="outer">    <!-- 最外層 -->
	<div class="inner">   <!-- 第二層 -->
		<!-- 最内層 -->
		<div>
			<img src="img/group1.jpg" >
		</div>
		<!-- 最内層 -->
		<div>
			<img src="img/group2.jpg" >
		</div>
		<!-- 最内層 -->
		<div>
			<img src="img/group3.jpg" >
		</div>
		<!-- 最内層 -->
		<div>
			<img src="img/group4.jpg" >
		</div>
		<!-- 複制的第一個輪播盒子 -->
		<div>
			<img src="img/group1.jpg" >
		</div>  
	</div>
</div>
           

css：
           

.outer{
	overflow: hidden;
	width: 600px;
}
.outer>.inner{
	left: -1px;
	display: flex;
	position: relative;
}
.outer>.inner img{
	width: 100%;
	height: 100%;
}
           

js：
           

let imgLength = $(".outer>.inner img").length
let outerWid = $(".outer").width()
// 将圖檔寬度設定為最外層寬度  (滿屏輪播)
$(".outer>.inner img").width(outerWid)

// 設定第二層寬度為輪播盒子寬度 * 輪播盒子個數
$(".outer>.inner").width($(".outer>.inner img").width()*imgLength)


let imgWid = $(".outer>.inner img").width()
let index = 1
// 定時輪播
setInterval(function(){
	$(".outer>.inner").animate({
		left: -imgWid*index
	},1000)
	index++
	// 實作無縫輪播
	if(index>=imgLength){
		index = 0
		$(".outer>.inner").animate({
			left: -imgWid*index
		},1)
		index++
	}
},2000)