хуйу нас не матерятся
Существует огромное множество готовых плагинов по созданию слайдеров и в принципе делать свой не имеет смысла. Так же есть много примеров кода, иногда даже с комментариями, но очень редко с подробным объяснением работы.
Мы попытаемся подробно рассказать как работает слайдер.
Это наша принципиальная схема. Есть дисплей- выделен синим, внутри дисплея создан слой с картинками. Ширина дисплея устанавливается ровно в ширину картинки. И если двигать в стороны слой с картинками, то на дисплее они будут меняться как в старом проекторе.
html код слайдера будет следующий:
<div class="ssdisplay" id="ss1">
<div class="ssimages">
<img src="img/slide1.jpg">
<img src="img/slide2.jpg">
<img src="img/slide3.jpg">
</div>
</div>
div class="ssdisplay" - это и есть дисплей, а div class="ssimages" - слой- контейнер для изображений.
Текущий результат:
Пока не похоже на нашу схему. Значит нужно научиться в зависимости от количества изображений устанавливать размер контейнера.
<script>
function myss(ssid,width,height,pause)//id элемента, ширина, высота, пауза
{
var ss = document.getElementById(ssid);//получаем корневой слой слайдшоу
var dspwidth=width;//ширина
var dspheight=height;//высота
var imgcount=ss.children[0].getElementsByTagName('img').length;//подсчитываем количество изображений
ss.style.width=dspwidth+'px';//устанавливаем ширину и высоту для дисплея
ss.style.height=dspheight+'px';
ss.children[0].style.width=(imgcount*dspwidth)+'px';//и слоя с изображениями
ss.children[0].style.height=dspheight+'px';
}
window.onload = function(e)//после загрузки страницы запускаем слайдер
{
myss('ss1',900,300,2000);
}
</script>
Теперь результат такой:
Ширину высчитали мы правильно, но есть один нюанс, так как в html части каждое изображение пишется с новой строки, то между ними есть невидимый пробел- символ переноса каретки. Из-за него образуются отступы между элементами. Чтобы от него избавиться добавим стиль font-size:0px; - символ останется, но его размер станет равным 0. Заодно установим относительное позиционирование и анимацию:
.ssdisplay > .ssimages
{
position:relative;
font-size:0px;
transition:left 0.5s;
}
Теперь более похоже. Задаём дисплею стиль overflow:hidden; и он перестаёт показывать содержимое за пределами его размеров.
.ssdisplay
{
overflow:hidden;
}
Доделываем наш javascrip. При инициализации выставляем левую координату для изображений в 0
ss.children[0].style.left='0px';
Если этого не сделать, то анимация фактически начнётся с 3 слайда. Пишем таймер для запуска анимации:
iid=window.setInterval(function()//устанавливаем интервал смены изображений
{
var minleft=-1*(dspwidth*(imgcount-1));//вычисляем максимальное смещение
if(minleft>=parseInt(ss.children[0].style.left))//проверяем не пора ли перемотать в начало
{
ss.children[0].style.left='0px';//если пора - перематываем
}else//либо
{
ss.children[0].style.left=(parseInt(ss.children[0].style.left)-900)+'px';//сдвигаем слой на ширину изображения
}
}, pause);
Целиком наш javascript выглядит так:
<script>
function myss(ssid,width,height,pause)
{
//Начальная настройка .firstChild;
var ss = document.getElementById(ssid);//получаем корневой слой слайдшоу
var dspwidth=width;//ширина
var dspheight=height;//высота
var imgcount=ss.children[0].getElementsByTagName('img').length;//подсчитываем количество изображений
ss.style.width=dspwidth+'px';//устанавливаем ширину и высоту для дисплея и слоя с изображениями
ss.style.height=dspheight+'px';
ss.children[0].style.width=(imgcount*dspwidth)+'px';
ss.children[0].style.height=dspheight+'px';
ss.children[0].style.left='0px';//устанавливаем координату в 0
iid=window.setInterval(function()//устанавливаем интервал смены изображений
{
var minleft=-1*(dspwidth*(imgcount-1));//вычисляем максимальное смещение
if(minleft>=parseInt(ss.children[0].style.left))//проверяем не пора ли перемотать в начало
{
ss.children[0].style.left='0px';//если пора - перематываем
}else//либо
{
ss.children[0].style.left=(parseInt(ss.children[0].style.left)-900)+'px';//сдвигаем слой на ширину изображения
}
}, pause);
}
window.onload = function(e)
{
myss('ss1',900,300,2000);
}
</script>
Получился простой слайдер без jquery, но не лишенный недостатков. К примеру если использовать картинки разной ширины то дисплей будет захватывать часть соседних изображений. Мы не добавили элементы управления, а в случае использования большого количества изображений, или изображений большого размера, будут проблемы с производительностью.
Все эти проблемы уже решены в готовый плагинах. Используйте их, не изобретайте велосипед.