Слайд-шоу на Javascript с передвижением картинок (без jQuery)

Слайд-шоу на JavaScript с передвижением изображений Предыдущая заметка Слайд-шоу на Javascript без jQuery и других js-библиотек серьезно подогрела любопытство некоторых разработчиков, так что появились запросы на разные виды слайд-шоу: одним хочется видеть движущиеся картинки, другим нужно делать указатели на каждую конкретную картинку, чтобы кликом можно было перейти к нужному изображению или далее. Потому решил развить тему моего тестового слайдера далее.

Структура HTML осталась прежней

Убрал лишь две гордые надписи с названием слайдера (js2slideshow)

  1. <div id="js2slideshow">
  2. <ul>
  3. <li><img src="img/i1.jpg" width="165" height="123"></li>
  4. <li><img src="img/i2.jpg" width="165" height="123"></li>
  5. <li><img src="img/i3.jpg" width="165" height="123"></li>
  6. <li><img src="img/i4.jpg" width="165" height="123"></li>
  7. <li><img src="img/i5.jpg" width="165" height="123"></li>
  8. </ul>
  9. </div>

К сожалению, текущая реализация не позволяет заключить картинки в гиперссылки и переходить по конкретному адресу. Слайд-шоу просто отображает поочередно изображения одно за другим и все. При этом скрипт мы заставляем скрипт считать что размеры всех изображений одинаковы и ориентироваться на размеры первого изображения.

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

Оно было упрощено по сравнению с предыдущим вариантом.

  1. #js2slideshow {
  2. position: relative;
  3. top: 20px;
  4. left: 100px;
  5. overflow: hidden;
  6. }
  7. #js2slideshow img{
  8. position: relative;
  9. vertical-align: top;
  10. border: 1px solid #eee;
  11. }
  12. #js2slideshow ul{
  13. margin: 0;
  14. padding: 0;
  15. overflow: hidden;
  16. border: 2px solid #eee;
  17. }
  18. #js2slideshow li{
  19. list-style: none;
  20. display: inline-block;
  21. position: absolute;
  22. z-index: 0;
  23. }
  24.  

Очень настоятельно рекомендую тем, кто будет разбираться в коде, закомментировать строку с overflow: hidden; Будет более понятно что, откуда и куда едет:)

Javascript-код слайд-шоу

  1. var js2slideshow = {};
  2. js2slideshow = document.getElementById("js2slideshow");
  3.  
  4. js2slideshow.init = function(timeSpeed,timeWait){
  5.  
  6. var curImg, curImgLeft, nextImgLeft, flag, i;
  7.  
  8. //запоминаем скорость (время каждого тика)
  9. this.timeSpeed = timeSpeed;
  10. //запоминаем время задержки между сменой слайда
  11. this.timeWait = timeWait;
  12.  
  13. //запоминаем сами картинки
  14. this.images = this.getElementsByTagName("img");
  15.  
  16. //смотрим высоту по размерам первой картинки
  17. this.width = this.images[0].width;
  18. this.height = this.images[0].height;
  19.  
  20. //задаем размер нашему слайдеру по высоте первой картинки
  21. this.style.width = this.width+"px";
  22. this.style.height = this.height +"px";
  23.  
  24. //запоминаем количество картинок
  25. this.length = this.images.length;
  26.  
  27. //начальные координаты картинок
  28. for(i = 0; i < this.images.length; i++){
  29. this.images[i].style.left = this.width * i + "px";
  30. }
  31.  
  32. //метод для таймера
  33. this.timer = function (){
  34.  
  35.  
  36. count = 0;
  37.  
  38. //запускаем функцию анимации
  39. animation()
  40.  
  41. //анимируем наши картинки как большую ленту
  42. //при это каждую картинку, у которой CSS-свойство
  43. //left стало меньше -ширины картинки, помещаем в правый край ленты
  44. function animation(){
  45. count--;
  46. flag = false;
  47. for(i = 0; i < js2slideshow.images.length; i++){
  48. curImg = js2slideshow.images[i];
  49. curImgLeft = parseInt(js2slideshow.images[i].style.left);
  50. nextImgLeft = curImgLeft - 1 ;
  51.  
  52. //Если зашли за границу, сразу перекидываем картинку
  53. //на правый край ленты и обнуляем счетчик
  54. if(nextImgLeft <= -js2slideshow.width){
  55. count = 0;
  56. curImg.style.left = (js2slideshow.images.length-1)*js2slideshow.width + "px";
  57. //alert(curImg.style.left);
  58. timeSpeed = js2slideshow.timeWait ;
  59. flag = true;
  60. }
  61. else {
  62. //Иначе продолжаем двигаться.
  63. curImg.style.left = nextImgLeft + "px";
  64.  
  65. //Если перескока картинки вправо не было, то без задержки
  66. if (!flag) timeSpeed = js2slideshow.timeSpeed;
  67. }
  68. }
  69.  
  70.  
  71. if (count > -js2slideshow.width) setTimeout(arguments.callee,timeSpeed)
  72. }
  73. }
  74.  
  75. setTimeout(this.timer, 0)}
  76.  
  77.  
  78. //время на один пиксель движения, задержка между остановками картинок в кадре
  79. js2slideshow.init(10,2000);

Из изменений: названия объекта везде, где это возможно, заменены на this. В метод инициализации слайд-шоу добавлены аргументы, отвечающие за скорость движения картинок и время задержки картинки, когда она находится в "фокусе". Посмотреть работающую версию слайд-шоу

Прикрепленный файлРазмер
js2slideshow.zip21.74 кб
slide_show_mini.html2.09 кб