JavaScript环形显示图片

一效果图
二代码
就一个函数而已。有些参数可以提取到配置中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图图</title>

</head>
<body>

 <div id="img_container" style="position:relative;zoom:0.7;margin:0 auto;width:50%;">
 
 </div>
<script type="text/javascript" >
//conf预留。没有用。可以自定义。
function huanxingImg(img_contain,url,speed,conf){
		var width = 640, height = 852;
		var _top, _right, _bottom, _left, rect;
		var id = 0;
		for ( var i = 0; i < 12; i++) {// 高递增
			for ( var j = 0; j < 10; j++) {
				_left = j * 64;
				_top = i * 71;
				_right = _left + 64;
				_bottom = _top + 71;
				_left += "px";
				_top += "px";
				_right += "px";
				_bottom += "px";
				rect = "rect(" + _top + " " + _right + " " + _bottom + " " + _left+ ")";
				var img = document.createElement("img");
				img.setAttribute("src", url);
				img.setAttribute("eq", id++);
				img.style.position = "absolute";
				img.style.display = "none";
				img.style.clip = rect;
				img_contain.appendChild(img);
			}
		}
		var count = 0;
		var total = 120;
		var index = 0;// 当前坐标位置。
		var right_times = 0;// 向右转向的次数
		var max_right;
		var down_times = 0;// 向下转向的次数
		var max_down;
		var left_times = 0;// 向左转向的次数
		var max_left;
		var up_times = 0;// 向上转向的次数
		var max_up;
		var dir = "right";// 初始化方向向右
		var t = setInterval(function() {

			// 以10*12 的大小为边界。
			// 1如果当前方向向右，并且当前位置小于最右边。则index++。 最右边位置=12-最右边次数+1 （下同）
			// 1.2如果当前方向向右，并且当前位置到了最右边。则index+=10。改方向为向下。最右边次数++。最右边位置=12-最右边次数+1
			// 2如果当前方向向下，并且当前位置小于最下边，则index+=10
			// 2.2如果当前方向向下，并且当前位置到了最下边，则index-- 。改方向向左。
			// 3 如果当前方向向左，并且当前位置小于最左边，则index--。
			// 3.1如果当前方向向左，并且当前位置到了最左边，则index--。改方向向上向上。
			// 4如果当前方向向上，并且当前位置小于最上边，则index-=10.
			// 4.2 如果当前方向向上，并且当前位置到了最上边。则index-=10.改方向向右。继续从1开始递归。

			count++;
			max_right = (10 - right_times - 1) + right_times * 10;
			max_down = (10 - down_times - 1) + (12 - down_times - 1) * 10;
			max_left = (left_times+0) + (12 - left_times - 1) * 10;
			max_up = (up_times) + (up_times+1) * 10;
			if (dir == "right" && index <= max_right) {
				if (index < max_right) {
					img_contain.children[index++].style.display = "";
				} else {
					dir = "down";
					img_contain.children[index].style.display = "";
					index += 10;
					right_times++;
				}
			} else if (dir == "down" && index <= max_down) {
				img_contain.children[index].style.display = "";
				if (index < max_down) {
					index += 10;
				} else {
					dir = "left";
					index--;
					down_times++;
				}
			}else if (dir == "left" && index >= max_left) {
				if (index > max_left) {
					img_contain.children[index--].style.display = "";
				} else {
					dir = "up";
					img_contain.children[index].style.display = "";
					index-=10;
					left_times++;
					
				}
			}else if (dir == "up" && index >= max_up) {
				img_contain.children[index].style.display = "";
				if (index > max_up) {
					index -= 10;
				} else {
					dir = "right";
					index++;
					up_times++;
				
				}
			}

			if (count >= total) {
				clearInterval(t);
			}
		}, speed);
}
var img_con = document.getElementById("img_container");
new huanxingImg(img_con,"img/you.jpg",10);
</script>
</body>
</html>
JavaScript环形显示图片

猜你喜欢
