五张图片自动轮播（已完善）

与本人博客“五张图片自动轮播(未完善）”略有不同，但原理一样的，都是使用position的绝对位置改变
html代码：
注：图片路径替换一下，才能看出效果，并需要引用floatWindows.js和jquery.min.js两个js库

<script src="../js/floatWindows.js?v=2020.04.17"></script>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div id="main">
  <div id="warpper">
    <div id="inner">
      <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605447993571&di=f7b4be1f361978a2e00463e78828418a&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg"/></div>
      <div><img src="../images/add.png"/></div>
      <div><img src="../images/addressRenewal1.png"/></div>
      <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605447993571&di=f7b4be1f361978a2e00463e78828418a&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg"/></div>
      <div><img src="../images/addressRenewal4.png"/></div>
      <div><img src="../images/android.png"/></div>
      <div><img src="../images/app_download.png"/></div>
      <div><img src="../images/beian.png"/></div>
      <div><img src="../images/biangeng.png"/></div>
    </div>
  </div>
</div>

<br /> <br />

<div id="optrbtn">
	<span class="btnleft">«</span> <span class="btnright">»</span>
</div>

css代码：

#warpper {
	width: 1120px; /*一列展示几个的宽度 ,4*280 动态算*/
	height: 150px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	border: 1px solid red;
}

#inner {
	/*元素个数*280(div宽度)  动态算 1120px[4个元素] 1440px[5个元素]  1680px[6个元素]  2240px[8个元素]
      用JS动态设置改值
      */
	width: 2520px;
	position: absolute;
}

#inner div {
	width: 270px;
	height: 150px;
	/*使用浮动元素排列*/
	float: left;
	margin: 0 5px;
}

#optrbtn {
	text-align: center;
	font-size: 20px;
}

#optrbtn span {
	display: inline-table;
	border: 1px solid red;
	width: 50px;
	cursor: pointer;
	margin-right: 5px;
}

#inner div img {
	width: 100%;
	height: 100%;
}

js代码：

//初始化当前位置（可看到的轮播图的最左边的图片的位置）
var curNum = 0;

// 初始化(获取）轮播图所有的图片数量
var count = $("#inner").children('div').length; //9

// 设置轮播图中可以看到的图片数量
var totalViews = 4;

// 获取轮播图其中一个图片的宽度
var imgDivWidth = $('#inner div').width();

//每隔5秒自动轮播(总图片要超过可以看到的图片数量才轮播哦)
if(count > totalViews){
  setInterval("autoTest()", 5000);
}

function autoTest() {
	//如果到了最后一个元素，停止
  curNum ++;
	if ((count - curNum) <= 7) {
		curNum = 0;
	}
	$('#inner').css('left', -(curNum * (imgDivWidth+10)));//加10是因为margin左右边距各位5px
}

$(function() {
	//由右向左轮播
	$(".btnleft").click(function() {
      curNum ++;
		//如果到了最后一个元素，重来
		if ((count - curNum) < totalViews) {
          curNum =0;
		}
		$('#inner').css('left', -(curNum * (imgDivWidth+10)));
	});

	//由左向右轮播
	$(".btnright").click(function() {
      curNum --;
		//如果到了第一个元素，重来
		if (curNum == -1) {
			curNum = (count - totalViews); 
		}
		$('#inner').css('left', -(curNum * (imgDivWidth+10)));
	});
});