TinySlider 2 - легкий слайдер на Java Script без использования дополнительных библиотек. Размер скрипта всего 3 КБ. Здесь представлен слегка измененный вариант - добавлен текст поверх изображений, внизу материала есть ссылка на сайт автора, там можно скачать оригинальную версию.
HTML
Код для шапки сайта - подключение скрипта
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>TinySlider - Слайдер на JavaScript</title><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="script.js"></script></head>
Код для центральной части
<div id="wrapper"><div id="container"><div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div><div id="slider"><ul><li><h3 class="title">Первый слайд</h3><img src="photos/1.jpg" width="558" height="235" alt="Image One" /><div class="text">Описание первого слайда, здесь может быть какой-нибудь текст.</div></li><li><h3 class="title">Второй слайд</h3><img src="photos/1.jpg" width="558" height="235" alt="Image One" /><div class="text">Описание второго слайда, здесь может быть какой-нибудь текст.</div></li><li><h3 class="title">Третий слайд</h3><img src="photos/1.jpg" width="558" height="235" alt="Image One" /><div class="text">Описание третьего слайда, здесь может быть какой-нибудь текст.</div></li><li><h3 class="title">Четвертый слайд</h3><img src="photos/1.jpg" width="558" height="235" alt="Image One" /><div class="text">Описание четвертого слайда, здесь может быть какой-нибудь текст.</div></li></ul></div><div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div><ul id="pagination" class="pagination"><li onclick="slideshow.pos(0)"></li><li onclick="slideshow.pos(1)"></li><li onclick="slideshow.pos(2)"></li><li onclick="slideshow.pos(3)"></li></ul></div></div>
Код для низа сайта - инициализация скрипта
<script type="text/javascript">var slideshow=new TINY.slider.slide('slideshow',{id:'slider',auto:4,resume:false,vertical:false,navid:'pagination',activeclass:'current',position:0,rewind:false,elastic:true,left:'slideleft',right:'slideright'});</script>
CSS
* {margin:0; padding:0}body {font:12px Verdana,Arial; color:#555; background:#ddd}p {line-height:1.4; margin-bottom:12px}#wrapper {width:673px; margin:50px auto}#container {position:relative; background:#fff; padding:32px; height:235px; border-right:1px solid #ccc; border-bottom:1px solid #ccc}.sliderbutton {float:left; width:25px; height:235px; cursor:pointer}#slideleft {background:url(images/icons.gif) -50px -265px no-repeat}#slideleft:hover {background-position:-0 -265px}#slideright {background:url(images/icons.gif) 0 90px no-repeat}#slideright:hover {background-position:-50px 90px}#slider {float:left; position:relative; overflow:auto; width:558px; height:235px}#slider ul {position:absolute; list-style:none; top:0; left:0}#slider li {float:left; width:558px; height:235px; position: relative;}#slider li .title {position: absolute; top:10px; left: 0px; background: rgba(255, 255, 255, 0.72); padding: 5px 2%; width: 56.1%; color: #000;}#slider li .text {position: absolute; background: rgba(255, 255, 255, 0.76); bottom: 5px; right: 0px; padding: 5px; max-width: 70%; color: #000; text-shadow: 0px 0px 5px #fff;}.pagination {position:absolute; top:40px; right:61px; list-style:none; height:25px}.pagination li {float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}.pagination li:hover, li.current {background:#fff}
Java Script
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}}();
Основные параметры инициализации скрипта
auto:4, // время переключения слайдов (секунды)resume:false, // возобновить смену слайдов после остановки
navid:'pagination', // ID пагинации
activeclass:'current', // класс текущего элемента пагинации
position:0, // с какого слайда начинать (отсчет с 0)
rewind:false, // возврат назад, когда пролистаны слайды
elastic:true, // эффект переключения слайдов
