Scripts

Slider in 160 tekens

Door Wouter J -11-11-2013 10:33 -18.953 views

Een simpele JavaScript slider. Het support slide (vanaf boven) en fade. Al in al is het gemaakt met maar 160 tekens. Voorbeelden: slide|fade

Download alle bestanden als ZIP

slider.html

[code]<meta charset=utf-8 />
<title>Slider</title>
<style>
#s {list-style:none;position:relative;padding:0;overflow:hidden;width:618px;height:245px}
#s li{position:absolute;_opacity:0}
</style>

<body onload="
// fade (uncomment wanneer je dit wilt gebruiken)
//a=s.children,b=a.length,c=d=0,!function e(){with(a[c++%b].style)g=opacity=0,zIndex=d++,!function f(){(opacity=g+=.1)<1&&setTimeout(f,15)}();setTimeout(e,2e3)}()

// slide top (uncomment wanneer je dit wilt gebruiken)
//a=s.children,b=a.length,c=d=0,!function e(){with(a[c++%b].style)g=0,!function f(){((top=g++)<250&&setTimeout(f,5))||(top=0,zIndex=d-=3)}();setTimeout(e,2e3)}()
    ">
        <ul id="s">
            <li><img src="http://waldio.webatu.com/system/images/nemo[1].jpg">
            <li style="z-index:-1;"><img src="http://waldio.webatu.com/system/images/up[1].jpg">
            <li style="z-index:-2;"><img src="http://waldio.webatu.com/system/images/walle[1].jpg">[/code]