js中實現圖片輪播

前段時間領導要求給公司做一個簡單的員工薪資查詢APP，在首頁面中想做一個圖片輪播，放一些公司平常活動的圖片，現在總結記錄一下 ：活不多說，直接上代碼 

JS：

<script type="text/javascript">
	window.onload = function() {
		var container = document.getElementById("container");
		var list = document.getElementById("list");
		var buttons = document.getElementById("buttons").getElementsByTagName(
				"span");
		var prev = document.getElementById("prev");
		var next = document.getElementById("next");
		var index = 1;
		var animated = false;
		var interval = 2000;
		var timer;
		function animate(change) {
			animated = true;
			var newleft = parseInt(list.style.left) + change;
			var time = 300;//位移總時間
			var interval = 7;//位移間隔時間
			var speed = change / (time / interval);//每次位移量
			function go() {
				if ((speed < 0 && parseInt(list.style.left) > newleft)
						|| (speed > 0 && parseInt(list.style.left) < newleft)) {
					list.style.left = parseInt(list.style.left) + speed + "px";
					setTimeout(go, interval);
				}

				else {

					list.style.left = newleft + "px";
					if (newleft > -360) {
						list.style.left = -3240 + "px";
					}
					if (newleft < -3240) {
						list.style.left = -360 + "px";
					}
					animated = false;
				}

			}
			go();
		}

		function showbutton() {
			for (var i = 0; i < buttons.length; i++) {
				if (buttons[i].className == "on") {
					buttons[i].className = "";
					break;
				}
			}
			buttons[index - 1].className = "on";
		}
		function play() {
			timer = setTimeout(function() {
				next.onclick();
				play();
			}, interval);
		}
		function stop() {
			clearTimeout(timer);
		}
		//左箭頭
		prev.onclick = function() {
			if (index == 1) {
				index = 9;
			} else {
				index -= 1;
			}
			showbutton();
			if (animated == false) {
				animate(360);
			}
		}
		//右箭頭
		next.onclick = function() {
			if (index == 9) {
				index = 1;
			} else {
				index += 1;
			}
			showbutton();
			if (animated == false) {
				animate(-360);
			}
		}
		for (var i = 0; i < buttons.length; i++) {
			buttons[i].onclick = function() {
				if (animated) {
					return;
				}
				if (this.className == "on") {
					return;
				}
				var myIndex = parseInt(this.getAttribute("index"));
				var change = -360 * (myIndex - index);

				animate(change);
				index = myIndex;
				showbutton();
			}
		}
		container.onmouseover = stop;
		container.onmouseout = play;
		play();
		var startX, startY, endX, endY;
		document.getElementById("container").addEventListener("touchstart",
				touchStart, false);
		document.getElementById("container").addEventListener("touchmove",
				touchMove, false);
		document.getElementById("container").addEventListener("touchend",
				touchEnd, false);
		function touchStart(event) {
			var touch = event.touches[0];
			startY = touch.pageY;
			startX = touch.pageX;
		}
		function touchMove(event) {
			var touch = event.touches[0];
			endX = touch.pageX;
		}
		function touchEnd(event) {
			if ((startX - endX) > 50) {
					if (index == 9) {
						index = 1;
					} else {
						index += 1;
					}
					showbutton();
					if (animated == false) {
						animate(-360);
					}
				/* index = index + 1;
				showButton();
				if (animated == false) {
					animate(-360);
				} */
			} else if ((endX - startX) > 50) {
					if (index == 1) {
						index = 9;
					} else {
						index -= 1;
					}
					showbutton();
					if (animated == false) {
						animate(360);
					}
				/* index = index - 1;
				showButton();
				if (animated == false) {
					animate(360);
				} */
			}
		}

	}

	
</script>

CSS： 

* {
	margin: 0px;
	text-decoration: none;
}

.imglb{
	width: 360px;
	height: 220px;
}

#container {
	width: 360px;
	height: 220px;
	position: relative;
	border: 1px solid #333;
	overflow: hidden;
	margin: 0 auto;
}

#list {
	width: 3920px;
	height: 220px;
	position: absolute;
	z-index: 1;
}

#list img {
	float: left;
}

#buttons {
	position: absolute;
	height: 10px;
	/* width: 100px; */
	z-index: 2;
	bottom: 3%;
	left: 50%;
}

#buttons span {
	cursor: pointer; /*假超鏈接樣式*/
	float: left;
	border: 1px solid #fff;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #333;
	margin-right: 5px;
}

#buttons .on {
	background: orangered;
}

.arrow {
	cursor: pointer;
	display: none;
	line-height: 39px;
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	width: 40px;
	height: 40px;
	position: absolute;
	z-index: 2;
	top: 90px;
	background-color: RGBA(0, 0, 0, .3);
	color: #fff;
}

.arrow:hover {
	background-color: RGBA(0, 0, 0, .7);
}

#container:hover .arrow {
	display: block;
}

#prev {
	left: 20px;
}

#next {
	right: 20px;
}

<div id="container">
		<div id="list" style="left: -360px;">
			<img class="imglb" src="../img/nh4.jpg" alt="5.pg" /> <img
				class="imglb" src="../img/rzs.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/bq.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/bq2.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/bq3.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/ht.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/wjq.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/nh2.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/nh3.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/nh4.jpg" alt="5.pg" /> <img class="imglb"
				src="../img/rzs.jpg" alt="5.pg" />
		</div>
		<div id="buttons">
			<span index="1" class="on"> </span> <span index="2" class=""></span>
			<span index="3" class=""></span> <span index="4" class=""></span> <span
				index="5" class=""></span> <span index="6" class=""></span> <span
				index="7" class=""></span> <span index="8" class=""></span> <span
				index="9" class=""></span>
		</div>
		<!-- <a href="javascript:;" class="arrow" id="prev">&lt;</a> 
		<a href="javascript:;" class="arrow" id="next">&gt;</a> -->
		<input type="hidden" id="next" /><input type="hidden" id="prev" />
	</div>

最後放到手機上看了一下效果挺好的,主要注意的地方就是位移量算好就可以了