JS控制图片滑动

最新推荐文章于 2021-09-24 18:50:09 发布

原创最新推荐文章于 2021-09-24 18:50:09 发布 · 811 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #图片滑动

Web相关专栏收录该内容

1 篇文章

订阅专栏

网上看到别人写的一个JS控制图片滑动的实现，看完后整理一下以作备忘。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS控制图片滑动</title>
<script>
	function getStyle(element) {
		return element.currentStyle || window.getComputedStyle(element, null);
	}

	function bindFunction(object, func) {
		return function() {
			return func.apply(object, arguments);
		}
	}

	function topValue(t, b, c, d) {
		if ((t /= d / 2) < 1)
			return c / 2 * t * t * t * t + b;
		return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
	}

	function SliderPan(container, slider, count, direction) {
		this.slider = document.getElementById(slider);
		this.container = document.getElementById(container);
		this.count = count;
		this.direction = direction;
		this.w = 3000;
		this.d = 50;
		this.s = 10;
		var p = getStyle(this.container).position;
		p == "relative" || p == "absolute"
				|| (this.container.style.position = "relative");
		this.container.style.overflow = "hidden";
		/* 个人认为下面应该是relative，网上的版本用的却是absolute，经测试两者都可以 */
		// this.slider.style.position = "absolute";
		this.slider.style.position = "relative";
	}

	SliderPan.prototype = {
		run : function() {
			this.index = 0;
			var size = this.direction ? this.slider.offsetWidth
					: this.slider.offsetHeight;
			var target = 0 - (size / this.count) * this.index;
			this.slider.style[this.direction ? "left" : "top"] = target + "px";
			setTimeout(bindFunction(this, this.next), this.w);
		},
		next : function() {
			this.index++;
			this.index == this.count && (this.index = 0);
			var curPos = getStyle(this.slider)[this.direction ? "left" : "top"];
			this.b = parseInt(curPos);
			var size = this.direction ? this.slider.offsetWidth
					: this.slider.offsetHeight;
			var target = 0 - (size / this.count) * this.index;
			this.c = Math.round(target - this.b);
			this.t = 0;
			setTimeout(bindFunction(this, this.step), this.s);
		},
		step : function() {
			this.t++;
			var value = Math.round(topValue(this.t, this.b, this.c, this.d));
			this.slider.style[this.direction ? "left" : "top"] = value + "px";
			if (this.t < this.d) {
				setTimeout(bindFunction(this, this.step), this.s);
			} else {
				var s = this.b + this.c;
				this.slider.style[this.direction ? "left" : "top"] = s + "px";
				setTimeout(bindFunction(this, this.next), this.w);
			}
		}
	};

	window.onload = function() {
		new SliderPan("container1", "slider1", 3, true).run();
		new SliderPan("container2", "slider2", 3, false).run();
	}
</script>
</head>
<body>
	<table border="1">
		<tr>
			<td>左右滑动</td>
			<td>
				<div id="container1"
					style="border: 1px solid #333; width: 300px; height: 200px;">
					<table id="slider1" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td><img style="border: 0; width: 300px; height: 200px;"
								src="http://pic10.nipic.com/20101103/2142051_223834589000_2.jpg" /></td>
							<td><img style="border: 0; width: 300px; height: 200px;"
								src="http://pic14.nipic.com/20110517/6911829_124224588187_2.jpg" /></td>
							<td><img style="border: 0; width: 300px; height: 200px;"
								src="http://pic11.nipic.com/20101201/4075160_091246775070_2.jpg" /></td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
		<tr>
			<td>上下滑动</td>
			<td>
				<div id="container2"
					style="border: 1px solid #333; width: 300px; height: 200px;">
					<table id="slider2" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td><img style="border: 0; width: 300px; height: 200px;"
								src="http://pic10.nipic.com/20101103/2142051_223834589000_2.jpg" /></td>
						</tr>
						<tr>
							<td><img style="border: 0; width: 300px; height: 200px;"
								src="http://pic14.nipic.com/20110517/6911829_124224588187_2.jpg" /></td>
						</tr>
						<tr>
							<td><img style="border: 0; width: 300px; height: 200px;"
								src="http://pic11.nipic.com/20101201/4075160_091246775070_2.jpg" /></td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>