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)