TinySlider 1.5K的滑动图片JS库

TinySlider 是一个只有1.5K左右的独立的滑动图片展示JS库，无需其他JS支持，可通过CSS来定制展示的外观，可展示的不仅仅是图片，同时该脚本还支持自动的旋转和恢复等功能。

代码正文双击正文可选择全部

1[代码][javascript]

<!DOCTYPE html><html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<style>
	blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul ,iframe{margin: 0;padding: 0}
	table {border-collapse:collapse;border-spacing:0; outline:0;}
	img,button,iframe{border:0;}
	html body{font-family:"simsun","Helvetica Neue", Helvetica;font-size:12px;color:#000; background:#fff;word-wrap: break-word; word-break : break-all;}
	ul,li{list-style-type:none;}

/* tinyslider */
	.slideshow{position:relative;margin:0 0 10px;padding:10px 10px 0 10px;zoom:1;overflow:hidden;}
	.slideshow .image,.slideshow .image li{width:294px;height:200px;overflow:hidden;}
	.slideshow .image{position:relative;color:#fff;height:200px;}
	.slideshow .image .ul12{position:absolute;top:0;}
	.slideshow .image li{float:left;}
	.slideshow .image a{display:block;}
	.slideshow_img{width:294px;height:200px;}
	.slideshow .caption{position:absolute;bottom:0;width:284px;padding:5px;line-height:14px;color:#fff;background:#000;background:rgba(0,0,0,0.6);}
	.slideshow .trigger{position:absolute;bottom:4px;right:12px;}
	.slideshow .trigger li{float:left;text-align:center;*height:14px;line-height:14px;font-weight:bold;margin:0 3px 0 0;padding:0 3px;color:#000;background:#fff;cursor:pointer;}
	.slideshow .trigger li{*letter-spacing:-4px;}
	.slideshow .trigger li.current{color:#fff;background:#ff7d01;}
	</style>

</head>
<body>
				
					<div class="slideshow" id="slideshow" style="width:294px;">
						<div class="image">
							<ul class="ul12">
								<li>
									<a href="http://ww.chinaz.com/tags.php?url=http://www.wan.wang" target="_blank"><img class="slideshow_img" src="slide1.gif" alt=""/></a>
									<div class="caption">万网正式启用wan.wang域名</div>
								</li><li>
									<a href="http://ww.chinaz.com/tags.php?url=http://www.xinnet.com/virtualhost/zt/com8.html" target="_blank"><img class="slideshow_img" src="slide2.jpg" alt=""/>
									</a>
									<div class="caption">买云虚拟主机 享.COM 8元价格</div>
								</li><li>
									<a href="http://www.chinaz.com/start/2015/0326/393334.shtml" target="_blank">
										<img class="slideshow_img" src="slide3.jpg" alt=""/>
									</a>
									<div class="caption">比特币“淘金”简史</div>
								</li><li>
									<a href="http://www.chinaz.com/start/2015/0323/392180.shtml" target="_blank">
										<img class="slideshow_img" src="slide4.jpg" alt=""/>
									</a>
									<div class="caption">1700万用户后：知乎往何处去？</div>
								</li>
							</ul>
						</div>
						<ul class="trigger" id="trigger">
							<li onclick="slideshow.pos(0)" class="current">1</li>
							<li onclick="slideshow.pos(1)">2</li>
							<li onclick="slideshow.pos(2)">3</li>
							<li onclick="slideshow.pos(3)">4</li>
						</ul>
						<script src="tinyslider.js"></script>
						<script>
						var slideshow=new TINY.slider.slide('slideshow',{
							id:'slideshow',
							auto:4,
							resume:false,
							vertical:false,
							navid:'trigger',
							activeclass:'current',
							position:0,
							rewind:false,
							elastic:true
						});
						</script>
					</div>
					
					
</body></html>

2[代码][javascript]tinyslider.js

//http://sandbox.scriptiny.com/tinyslider2
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.slider=function(){
	function slide(n,p){this.n=n; this.init(p)}
	slide.prototype.init=function(p){
		var s=this.x=T$(p.id), u=this.u=T$$('ul',s)[0], c=this.m=T$$('li',u), l=c.length, i=this.l=this.c=0; this.b=1;
		if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
		this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow='hidden';
		for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
		if(this.v){;
			u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
		}else{
			u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
		}
		this.nav(p.position||0);
		if(p.position){this.pos(p.position||0,this.a?1:0,1)}else if(this.a){this.auto()}
		if(p.left){this.sel(p.left)}
		if(p.right){this.sel(p.right)}
	},
	slide.prototype.auto=function(){
		this.x.ai=setInterval(new Function(this.n+'.move(1,1,1)'),this.a*1000)
	},
	slide.prototype.move=function(d,a){
		var n=this.c+d;
		if(this.r){n=d==1?n==this.l?0:n:n<0?this.l-1:n}
		this.pos(n,a,1)
	},
	slide.prototype.pos=function(p,a,m){
		var v=p; clearInterval(this.x.ai); clearInterval(this.x.si);
		if(!this.r){
			if(m){
				if(p==-1||(p!=0&&Math.abs(p)%this.l==0)){
					this.b++;
					for(var i=0;i<this.l;i++){this.u.appendChild(this.m[i].cloneNode(1))}
					this.v?this.u.style.height=(this.l*this.h*this.b)+'px':this.u.style.width=(this.l*this.w*this.b)+'px';
				}
				if(p==-1||(p<0&&Math.abs(p)%this.l==0)){
					this.v?this.u.style.top=(this.l*this.h*-1)+'px':this.u.style.left=(this.l*this.w*-1)+'px'; v=this.l-1
				}
			}else if(this.c>this.l&&this.b>1){
				v=(this.l*(this.b-1))+p; p=v
			}
		}
		var t=this.v?v*this.h*-1:v*this.w*-1, d=p<this.c?-1:1; this.c=v; var n=this.c%this.l; this.nav(n);
		if(this.e){t=t-(8*d)}
		this.x.si=setInterval(new Function(this.n+'.slide('+t+','+d+',1,'+a+')'),10)
	},
	slide.prototype.nav=function(n){
		if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==n?this.s:''}}
	},
	slide.prototype.slide=function(t,d,i,a){
		var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
		if(o==t){
			clearInterval(this.x.si);
			if(this.e&&i<3){
				this.x.si=setInterval(new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')'),10)
			}else{
				if(a||(this.a&&this.p)){this.auto()}
				if(this.b>1&&this.c%this.l==0){this.clear()}
			}
		}else{
			var v=o-Math.ceil(Math.abs(t-o)*.1)*d+'px';
			this.v?this.u.style.top=v:this.u.style.left=v
		}
	},
	slide.prototype.clear=function(){
		var c=T$$('li',this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
		for(i;i>0;i--){
			var e=c[i-1];
			if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t--}
		}
	},
	slide.prototype.sel=function(i){
		var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}
	}
	return{slide:slide}
}();

3[代码][javascript]tinyslidermin.js