javascript写无缝平移的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {margin: 0;padding: 0;}
		#container {
			width: 590px;
			height: 470px;
			position: relative;
			margin: 50px auto;
			border:1px solid;
			overflow: hidden;
		}

		#imgs {
			height: 470px;
			position: absolute;
			top: 0;
			left: 0;
			list-style: none;
		}
		#imgs li {
			width: 590px;
			height: 470px;
			float: left;
		}
		#pages {
			width: 590px;
			height: 30px;
			background: #000;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		#pages i {
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 5px;
			background: #fff;
			margin:10px;
		}
		#pages i.current {
			background: #f00;
		}
		#prev, #next {
			width: 45px;
			height: 100px;
			background: #000;
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			color: #fff;
			font-size: 30px;
			line-height: 100px;
			text-align: center;
		}
		#next {
			right: 0;
		}
	</style>
</head>
<body>
	<div id="container">
		<ul id="imgs">
			<li><a href="#"><img src="images/1.jpg"></a></li>
			<li><a href="#"><img src="images/2.jpg"></a></li>
			<li><a href="#"><img src="images/3.jpg"></a></li>
			<li><a href="#"><img src="images/4.jpg"></a></li>
		</ul>
		<div id="pages"></div>
		<div id="prev"><</div>
		<div id="next">></div>
	</div>

	<script src="js/tools.js"></script>
	<script>
		var lis = $("li"), // 所有轮播的图片盒子
			len = lis.length, // 图片张数
			liWidth = lis[0].offsetWidth, // 每个图片盒子宽度
			currentIndex = 1, // 当前图片索引
			nextIndex = 2, // 即将显示图片的索引
			duration = 3000, // 轮播时间间隔
			timer = null, // 轮播计时器id
			circles = null; // 所有小圆点

		/* 动态添加小圆点 */
		var html = "";
		for (var i = 0; i < len; i++) {
			html += "<i></i>";
		}
		$("#pages").innerHTML = html;
		// 获取所添加的所有小圆点DOM元素
		circles = $("i");
		circles[0].className = "current";

		// 复制第一个与最后一个图片盒子
		var first = lis[0].cloneNode(true),
			last = lis[len - 1].cloneNode(true);
		// 添加到 ul#imgs 内部
		$("#imgs").appendChild(first);
		$("#imgs").insertBefore(last, lis[0]);
		// 图片张数加2
		len += 2;
		// 设置 ul#imgs 宽度
		$("#imgs").style.width = liWidth * len + "px";
		$("#imgs").style.left = -liWidth + "px";
		
		// 轮播切换函数
		function move(){
			// 计算轮播切换定位终点
			var _left = -1 * nextIndex * liWidth;
			// 运动动画
			animate($("#imgs"), {left : _left}, 200, function(){
				// 运动结束，判断是否还原到原始位置
				if (currentIndex === len - 1) { // 最后
					currentIndex = 1;
					nextIndex = 2;
					$("#imgs").style.left = -liWidth + "px";
				} else if (currentIndex === 0) { // 最前
					currentIndex = len - 2;
					nextIndex = len - 1;
					$("#imgs").style.left = -1 * (len - 2) * liWidth + "px";
				}
			});
			// 轮播过程中，切换小圆点样式
			// 设置为红色背景的小圆点索引
			var circleIndex = nextIndex - 1;
			if (circleIndex < 0)
				circleIndex = len - 3;
			else if (circleIndex >= len - 2)
				circleIndex = 0;
			for (var i = 0; i < len - 2; i++) {
				circles[i].className = "";
			}
			circles[circleIndex].className = "current";

			// 修改索引
			currentIndex = nextIndex;
			nextIndex++;
		}

		/* 自动轮播 */
		timer = setInterval(move, duration);

		/* 鼠标移入/移出容器范围，停止/重启自动轮播 */
		$("#container").onmouseenter = function(){
			// 停止自动轮播
			clearInterval(timer);
		}
		$("#container").onmouseleave = function(){
			// 重启自动轮播
			timer = setInterval(move, duration);
		}

		/* 鼠标移入小圆点，切换 */
		$("#pages").onmouseover = function(e){
			var src = e.target;
			if (src.nodeName === "I") {
				// 获取当前移入小圆点的索引
				var index = Array.from(circles).indexOf(src);
				// 设置 nextIndex
				nextIndex = index + 1;
				// 调用 move()
				move();
			}
		}

		/* 向前/后翻页 */
		$("#prev").onclick = function(){
			nextIndex = currentIndex - 1;
			move();
		}

		$("#next").onclick = function(){
			move();
		}
	</script>
</body>
</html>
其中某些封装的函数，请参考我的另外一篇名为自己封装的tools.js文件的博客
javascript写无缝平移的轮播图

猜你喜欢
