Посмотрел я на ваш слайдер, и мне тоже захотелось написать свой.
По оформлению мне понравился как на сайте motor.ru и взял его за основу.
Вот один из примеров оформления:
http://motor.ru/articles/2011/08/24/auction/
Если к фотографиям нет соответствующего текста, то нет необходимости строить слайдер по структуре, как у вас:
<div class="slider">
<div><img src="/image/1.jpg" /><span>text for image 1</span></div>
<div><img src="/image/2.jpg" /><span>text for image 2</span></div>
<div><img src="/image/3.jpg" /><span>text for image 3</span></div>
</div>
Гораздо проще соединить все фотографии в одну и использовать вебтехнологию CSS-Sprite.
Это когда изображения располагаются в одном графическом файле, а для их показа используют CSS, как бы "вырезая" нужный кусок. Тогда структура сильно упрощается:
<div class="slider">
<img src="/image/image.jpg" />
</div>
Хочу сразу заметить, что все фото одного слайдера для соединения в один графический файл должны быть одного размера, смотри ссылку на motor.ru
Идём дальше. Для определения ширина и высоты слайдера можно использовать class="slider", а если у нас разные слайдеры?
Двойные классы class="slider slider1" возможны, но как-то не профессионально.
Простейшее решение - прописать размеры в аргументах картинки:
<img src="/image/image.jpg" width="500" height="300" />
Тогда и скрипт начинает работать не дожидаясь полной загрузки картинок, а уже после загрузки структуры ДОМ.
Ведь эти аргументы не трудно выловить с помощью JS.
Я пошел ещё дальше и сократил до
<div class="Slider" toggle="move" name="images/slide0-500-250-5-mycar.jpg"></div>
А что мелочиться? Краткость - сестра таланта!
При этом имя картинки формируется по следующим правилам:
1 аргумент - зарезервировал для ID, но в данный момент не использую (slide0)
2 аргумент - это ширина слайдера (500px)
3 аргумент - высота слайдера (300px)
4 аргумент - число фото в картинке (5)
5 аргумент - содержание файла
ну и знак "-" в качестве символа, разделяющего аргументы.
А чтоб было ещё круче, добавил аргумент toggle.
Если его нет или toggle="no" то картинки переключаются без эффекта, а если toggle="move" - то с перемещением.
Короче, что я тут распинаюсь. Скрипт весит всего 3К.
Кликайте распаковывайте и смотрите.
Если будет время - допишу другие эффекты переключения.
Буду рад отзывам и критическим замечаниям.
PS: Я просто в восторге от этого сайта! Мне тут всё нравиться!
При написании слайдера использовал статьи "Объекты, ООП", "Замыкания", "Drag and drop", "Основы программной анимации на JavaScript"
