	一句话概述代码的用途：（例：使用js控制复制及输入数据时只能是数字） 120* 字
	代码类型：无函数类插件单段代码直接可运行
	TAG标签：（用空格隔开） 30 字
	描述说明：请填写代码的实现原理、应用场景、功能说明、调用示例、注意事项等。
	TinySlider 是一个只有1.5K左右的独立的滑动图片展示JS库，无需其他JS支持，可通过CSS来定制展示的外观，可展示的不仅仅是图片，同时该脚本还支持自动的旋转和恢复等功能。
	代码正文：*
	简单说明：排序： <!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> <!-- tinyslider start --> <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> <!-- tinyslider end --> </body></html>
	简单说明：排序： //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.lthis.h)+'px' }else{ u.style.left=0; this.w=p.width\|\|c[0].offsetWidth; u.style.width=(this.lthis.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.a1000) }, 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.lthis.hthis.b)+'px':this.u.style.width=(this.lthis.wthis.b)+'px'; } if(p==-1\|\|(p<0&&Math.abs(p)%this.l==0)){ this.v?this.u.style.top=(this.lthis.h-1)+'px':this.u.style.left=(this.lthis.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?vthis.h-1:vthis.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-(8d)} 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+(12d):t+(4d))+','+(i==1?(-1d):(-1d))+','+(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} }();
	简单说明：排序： 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.lthis.h)+'px'}else{u.style.left=0;this.w=p.width\|\|c[0].offsetWidth;u.style.width=(this.lthis.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.a1000)},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.lthis.hthis.b)+'px':this.u.style.width=(this.lthis.wthis.b)+'px';} if(p==-1\|\|(p<0&&Math.abs(p)%this.l==0)){this.v?this.u.style.top=(this.lthis.h-1)+'px':this.u.style.left=(this.lthis.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?vthis.h-1:vthis.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-(8d)} 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+(12d):t+(4d))+','+(i==1?(-1d):(-1d))+','+(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}}();