JS控制图片滑动

来源：互联网发布：阿里云服务器怎么用编辑：程序博客网时间：2024/05/01 06:41
网上看到别人写的一个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>