Слайд-шоу на Javascript без jQuery и других js-библиотек

слайд-шоу на Javascript Озадачился написанием примера создания слайдера и решил сделать наброски для слайд-шоу без использования Javascript-библиотек вроде jQuery (на днях дискутировал о том что jQuery это не панацея от всех бед:)) Так вот для того чтобы создать слайд-шоу нужно:

  1. структура HTML с которой будем работать
  2. CSS-оформление
  3. Javascript-код

Структура HTML с которой будем работать

В качестве структуры выбрал следующее расположение элементов:

  1. <div id="js2slideshow">
  2. <div class="caption2">js2slideshow слайдер</div>
  3. <div class="caption">js2slideshow слайдер</div>
  4.  
  5. <ul>
  6. <li><img src="img/i1.jpg" width="165" height="123"></li>
  7. <li><img src="img/i2.jpg" width="165" height="123"></li>
  8. <li><img src="img/i3.jpg" width="165" height="123"></li>
  9. <li><img src="img/i4.jpg" width="165" height="123"></li>
  10. <li><img src="img/i5.jpg" width="165" height="123"></li>
  11. </ul>
  12.  
  13. </div>

  • Основное контейнер для всего слайд-шоу <div id="js2slideshow">
  • Контейнер <div class="caption2"> для имитации тени
  • <ul> с элементами изображениями

Чуть-чуть пояснений для начинающих. <div id="js2slideshow"> служит основным контейнером для всего слайд-шоу. Это нормальная практика, для своего плагина (скрипта) использовать div с уникальным id. В нашем случае проблема с id может появиться если в вашем скрипте появится такой же div с таким же идентификатором. Потому старайтесь этого избегать и/или использовать способы избежания конфликтов. Хранение последовательности изображений в списке тоже нормальная практика.

CSS-оформление

  1. #js2slideshow {
  2. position: relative;
  3. top: 20px;
  4. left: 100px;
  5. }
  6. #js2slideshow img{
  7. opacity: 1;
  8. filter: alpha(Opacity=100);
  9. }
  10.  
  11. #js2slideshow .caption, #js2slideshow .caption2{
  12. position: absolute;
  13. font-size: 13px;
  14. font-family: Tahoma;
  15. display: inline;
  16. z-index: 3;
  17. }
  18. ...
  19.  

Не стал захламлять заметку размещением всего CSS-полотна. Стили придают слайдеру опрятный вид, и позволяют расположить изображения удобным для нас способом. Обратите внимание на фильтр, сейчас слайдер работает в браузерах понимающих свойство opacity, для IE надо дописывать работу с фильтром. Мне было лень это делать. Если будет нужно, допишу позже. В примере, который можно скачать, стили сжаты.

Javascript-код

  1. var js2slideshow = {};
  2. js2slideshow = document.getElementById("js2slideshow");
  3.  
  4. js2slideshow.init = function(){
  5.  
  6. //запоминаем сами картинки
  7. js2slideshow.images = js2slideshow.getElementsByTagName("img");
  8.  
  9. //смотрим высоту по размерам первой картинки
  10. js2slideshow.width = js2slideshow.images[0].width;
  11. js2slideshow.height = js2slideshow.images[0].height;
  12.  
  13. //запоминаем количество картинок
  14. js2slideshow.length = js2slideshow.images.length;
  15.  
  16. //первая картинка
  17. js2slideshow.start = 0;
  18.  
  19. //текущая картинка
  20. js2slideshow.current = 4;
  21.  
  22.  
  23. //метод для таймера
  24. js2slideshow.timer = function (){
  25.  
  26. js2slideshow.images[js2slideshow.current].style.opacity = 1;
  27. js2slideshow.images[(js2slideshow.current + 1)%js2slideshow.length].style.opacity = 0;
  28.  
  29. count = 0;
  30. animation(js2slideshow.images[js2slideshow.current], js2slideshow.images[(js2slideshow.current + 1)%js2slideshow.length])
  31.  
  32. //первую прячем, вторую показываем
  33. function animation(img1, img2){
  34. count++;
  35. img1.style.opacity = 1 - count/10;
  36.  
  37.  
  38. img2.style.opacity = count/10;
  39.  
  40.  
  41. if (count < 10) setTimeout(function(){animation(img1, img2)},100)
  42. else js2slideshow.current = (js2slideshow.current + 1)%js2slideshow.length;
  43.  
  44. }
  45. }
  46.  
  47. setInterval(js2slideshow.timer, 3000)}
  48.  
  49. js2slideshow.init();

Можно посмотреть как работает слайд-шоу, однако для использования в практических решениях оно еще не готово (нужно причесать код, потестировать)

Прикрепленный файлРазмер
js2slideshow.zip21.39 кб
i1.jpg4.33 кб
i2.jpg2.86 кб
i3.jpg4.29 кб
i4.jpg4.56 кб
i5.jpg2.65 кб
slide_show_mini.html2.67 кб

А где в коде уточняется,

А где в коде уточняется, через какое время будет меняться картинка? Как это время увеличить?

Здравствуйте!

Хочется скопировать вашу статью и разместить у себя на блоге.
Само собой, будет присутствовать ссылка на ваш сайт

>> А где в коде уточняется,

>> А где в коде уточняется, через какое время будет меняться картинка? Как это время увеличить?

47я строка, работа таймера
setInterval(js2slideshow.timer, 3000)} Указываете больший промежуток времени и готово.

>>Хочется скопировать вашу статью и разместить у себя на блоге.
Само собой, будет присутствовать ссылка на ваш сайт

Уважаемый гражданин спамер, ссылки, которые вы пытались разместить, почищены. А статью, да, разместить можно с указанием авторства

Отправить комментарий

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, пьёте ли Вы кофе или рассылаете спам
8 + 8 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.