个人习作：简单的JS幻灯片代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!Doctype HTML> 
<html> 
<head> 
<title>slider</title> 
<script type="text/javascript"> 
	function e(p,ele) {return p.getElementsByTagName(ele)};
	function el(id) {return document.getElementById(id)};
	function t(o,e,f) {o.addEventListener?o.addEventListener(e,f,false):o.attachEvent('on'+e,f)};
			var ss = {};
			ss.slider = function() {
				var arg, move = function() {};
				move.prototype.init = function(opt) {
					arg = this.set(opt);
					var wrap = el(opt.gallery), 
						ctl = el(opt.control), 
						obj = this.obj = e(wrap,'ul')[0], 
						$this = this;
					this.u = e(obj,'li');
					this.cu = e(ctl,'li');
					this.uW = this.u[0].offsetWidth;
		this.uH = this.u[0].offsetHeight; 
		this.len = this.u.length;
		this.old = this.cur = arg.index;
		wrap.style.cssText = 'width:' + this.uW + 'px;' + 'height:' + this.uH + 'px;' + 'overflow: hidden;'; 
		obj.style.cssText = 'height:' + this.uH + 'px;' + 'width:' + (arg.dir ? this.uW + 'px;' : this.len * this.uW + 'px;') + (arg.dir ? 'top:' + -1 * this.cur * this.uH + 'px;' : 'left:' + -1 * this.cur * this.uW + 'px;'); 
					this.cu[this.cur].className = 'current';
					this.event(arg.type);
					setTimeout(function() {$this.auto()},arg.interval);
				};
				move.prototype.set = function(opt) {
					org = {
						gallery: 'gal-wrap',
						control: "gal-panel",
						dir: false,
						index: 0,
						speed: 16,
						interval: 3000,
						type: 'click'
					};
					for(var p in opt) {
						org[p] = opt[p]
					}
					return org;
				};
				move.prototype.timeMgr = function() {
				var $this = this;
				this.m = setTimeout(function() {$this.auto(); $this.indexMgr()},arg.interval);
				};
				move.prototype.auto = function() {
					var $this = this;
					if(this.a != undefined) clearInterval(this.a);
					this.a = setInterval(function() {$this.pos()},arg.speed);
				};
				move.prototype.pos = function() {
				var dir = arg.dir ? parseInt(this.obj.style.top) : parseInt(this.obj.style.left), 
					area = arg.dir ? this.uH : this.uW,
					dis = (area * this.cur + dir) * .1, 
					step = dis >= 0 ? Math.ceil(dis) : Math.floor(dis);
				arg.dir ? this.obj.style.top = dir - step + 'px' : this.obj.style.left = dir - step + 'px';
					this.stop(dir,area);
				};
				move.prototype.stop = function(dir,area) {
					if(Math.abs(dir) == area * this.cur) {
						clearInterval(this.a);
						this.cur == this.len - 1 ? this.cur = 0 : this.cur++;
						this.timeMgr();
					}
				};
				move.prototype.indexMgr = function() {
					this.cu[this.cur].className = 'current';
					if(this.old != this.cur) {
						this.cu[this.old].className = '';
						this.old = this.cur;
					}
				};
				move.prototype.event = function(e) {
					for(var i = 0; i < this.cu.length; i++) {
						var $this = this;
						t(this.cu[i],e,num(i,$this));
					}
					function num(n,$this) {
						return function() {
							clearInterval($this.a);
							clearTimeout($this.m);
							$this.cu[n].className = 'current';
							if($this.old != n) {
								$this.cu[$this.old].className = '';
								$this.old = $this.cur = n;
							}
							$this.c = 0;
							$this.auto();
						}
					}
				};
				return move;
			}();
		</script> 
		<style type="text/css"> 
			* {margin: 0; padding: 0;}
			body {padding: 0 0 50px 50px;}
			#gal-wrap {
				position: relative;
			}
			#gallery {
				position: absolute;
			}
			#gallery li {
				list-style: none;
				float: left;
				width: 450px;
				height: 350px;
			}
			#gallery p {
				text-align: center;
				color: #cdcdcd;
			}
			#gal-panel {
				height: 100%;
				overflow: hidden;
			}
			#gal-panel li {
				float: left;
				margin-right: 6px;
				list-style: none;
				cursor: pointer;
			}
			#gal-panel li.current {
				font-weight: bold; 
				color: red;
			}
		</style> 
	</head> 
	<body> 
		<div id="gal-wrap"> 
			<ul id="gallery"> 
			<li><p><img src="//ku.shouce.ren/files/images/201601/56a34a1ed05a6.jpg" /></p></li> 
			<li><p><img src="//ku.shouce.ren/files/images/201601/56a34a1c9caec.jpg" /></p></li> 
			<li><p><img src="//ku.shouce.ren/files/images/201601/56a34a1a190aa.jpg" /></p></li> 
			<li><p><img src="//ku.shouce.ren/files/images/201601/56a34a1b7ecee.jpg" /></p></li> 
			</ul> 
		</div> 
		<div id="gal-panel"> 
			<ul id="gallery-panel"> 
				<li>1</li> 
				<li>2</li> 
				<li>3</li> 
				<li>4</li> 
			</ul> 
		</div> 
		<script type="text/javascript"> 
			var tt = new ss.slider();
			tt.init({
				gallery: 'gal-wrap',
				control: "gal-panel",
				dir: false,
				index: 0,
				speed: 20,
				interval: 1000,
				type: 'mouseover'
			});
		</script> 
	</body> 
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

个人习作：简单的JS幻灯片代码

分类

图片代码

描述

个人习作：简单的JS幻灯片代码，也就是大家经常见到的JS图片切换特效，我做的第一个JS组件，纯JavaScript实现的，没有借用jQuery，是去年底写的. 现在看看, 代码结构混乱, 所谓颗粒化基本没有，纯为练习之作, 然望大家多多指点。