slider 滑门

html

<div id="slider-div">
    <div>
        <div id="slider">
            <ul>
                <li id="content">
                    <h1>TinySlider - Simple JavaScript Slideshow</h1>
                    <p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
                    <p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
                </li>
                <li><img src="/images/sea-turtle.jpg" width="200" height="150" alt="Sea turtle" /></li>
                <li><img src="/images/coral-reef.jpg" width="200" height="150" alt="Coral Reef" /></li>
                <li><img src="/images/blue-fish.jpg" width="200" height="150" alt="Blue Fish" /></li>
            </ul>
        </div>
    </div>
    <ul id="pagination" class="pagination">
        <li οnclick="slideshow.pos(0)">1</li>
        <li οnclick="slideshow.pos(1)">2</li>
        <li οnclick="slideshow.pos(2)">3</li>
        <li οnclick="slideshow.pos(3)">4</li>
    </ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:3,
    resume:true,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0
});
</script>

 

js

 

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=T$(p.id), u=this.u=T$$('ul',s)[0], c=T$$('li',u), l=c.length, i=this.l=this.c=0;
        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.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.pos(p.position||0,this.a?1:0)
    },
    slide.prototype.auto=function(){
        this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
    },
    slide.prototype.move=function(d,a){
        var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
    },
    slide.prototype.pos=function(p,a){
        clearInterval(this.u.ai); clearInterval(this.u.si);
        var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
        t=this.v?p*this.h:p*this.w, d=t>Math.abs(o)?1:-1; t=t*-1; this.c=p;
        if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==p?this.s:''}}
        this.u.si=setInterval(new Function(this.n+'.slide('+t+','+d+','+a+')'),20)
    },
    slide.prototype.slide=function(t,d,a){
        var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
        if(o==t){
            clearInterval(this.u.si); if(a||(this.a&&this.p)){this.auto()}
        }else{
            var v=o-Math.ceil(Math.abs(t-o)*.15)*d+'px';
            this.v?this.u.style.top=v:this.u.style.left=v
        }
    };
    return{slide:slide}
}();

 

css

.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:200px; height:150px; border:2px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:200px; height:150px; padding-right:10px}

.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}

li#content {width:164px; height:130px; padding:15px 28px 15px 18px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}