Слайд шоу javascript – Создаем простое JavaScript слайд-шоу без использования JQuery

27.08.2018 alexxlab

Содержание

Создаем слайд-шоу на JavaScript для сайта: djshuric — LiveJournal

Приступаем к реализации.

Шаг 1.
Для начала нам понадобятся рисунки, которые будут включены в слайд-шоу. В примере мы будем использовать три рисунка. Подготавливаем изображения, одинаковые по размеру в формате GIF. Названия могут быть любые, мы назовем по порядку slide1, slide2, slide3. Если у Вас есть интересные рисунки разных размеров, Вы легко можете подогнать под одну величину в программе Photoshop или ACDSee.

В итоге у в корне нашего сайта должны лежать три рисунка slide1.gif, slide2.gif и slide3.gif. Размеры каждого изображения 450x281px.

Шаг 2.
Далее нам необходимо выполнить предварительную загрузку рисунков. Так как мы используем JavaScript, и хотим, чтобы рисунки отображались без задержек, то прежде, чем отобразить рисунки, необходимо загрузить их в кэш.

Мы создали три экземпляра объекта Image (slide1.gif, slide2.gif и slide3.gif — наши изображения), каждый из которых ссылается на рисунок, составляющий слайд-шоу. Таким образом, рисунки загружаются в кэш и становятся доступными для отображения в любое время. Обратите внимание, что весь код включен в область <head>.

Шаг 3.
Добавим HTML код для отображения первого рисунка из слайд-шоу.

Обратите внимание, что мы задали значение атрибуту «name» нашего рисунка. Таким образом, с помощью JavaScript мы сможем манипулировать рисунком (slide1.gif — название первого нашего рисунка, width=400 height=281 — размеры рисунков).

Шаг 4.
Теперь напишем JavaScript скрипт, который будет обращаться к объекту Image и периодически изменять значение его атрибута «src», создавая, таким, образом, слайд-шоу. Код скрипта:

Основная строка в этом скрипте следующая:
document.images.slide.src=eval(«image»+step+».src»)
В левой части строки мы получаем доступ к атрибуту «src» объекта Image, который мы назвали «slide». В правой части строки мы динамически устанавливаем путь к новому источнику рисунка, таким образом изменяя рисунок. Три возможных источника:

image1.src
image2.src
image3.src

Шаг 5.

Соберем теперь весь код в одно целое. Таким образом, мы создали простое слайд-шоу на JavaScript. Обратите внимание, результат из Шага 2 мы вставляем между тегами <head></head>. Шаг 3 и Шаг 4 сливаем воедино и вставляем между тегами <body></body>, в то место сайта, где должно отображаться слайд-шоу.

djshuric.livejournal.com

Javascript для слайд-шоу — javascript

Этот вопрос старый, но вот более подробный пример с чистым JavaScript. Предполагается, что index.html и slideshow.js находятся на одном уровне. Он начинается с автоматического воспроизведения слайд-шоу (которое может быть приостановлено и возобновлено), а также имеет предыдущие и следующие кнопки. Если вам нужен только один из этих наборов функциональных возможностей, должно быть довольно просто удалить другой.

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

<!-- index.html -->

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slideshow</title>
</head>
<body>

<section>
    <div>
        <img>
    </div>
    <div>
        <button type="button">Play</button>
        <button type="button">Pause</button>
    </div>
    <div>
        <button type="button">Prev</button>
        <button type="button">Next</button>
    </div>
</section>

<script src="slideshow.js"></script>
</body>
</html>

Если вы хотите поддерживать IE8 и/или ниже, вам нужно будет отключить прослушиватель DOMContentLoaded. По сути, вы могли бы просто извлечь IIFE, а затем заменить его окончательную строку return beginSlideshow с помощью beginSlideshow(). Надеюсь, это имеет смысл, и я надеюсь, что вы сочтете это полезным. Удачи.

// slideshow.js

document.addEventListener(
  // IE 9 and up. See http://caniuse.com/#feat=domcontentloaded
  'DOMContentLoaded'

, (function STRICT() {
    'use strict';

    // Avoid 'new' and stick to array literals where possible.
    var images =
          [ 'img/30.gif'
          , 'img/31.gif'
          , 'img/32.gif'
          , 'img/33.gif'
          , 'img/34.gif'
          ]

      , img = document.getElementById('image')
      , playBtn = document.getElementById('playBtn')
      , pauseBtn = document.getElementById('pauseBtn')
      , prevBtn = document.getElementById('prevBtn')
      , nextBtn = document.getElementById('nextBtn')

      , index = 0
      , indexOfLastImage = images.length - 1

      , play
      , playInterval
      , pause
      , goToPrevious
      , goToNext
      , beginSlideShow


    play = function() {
      playInterval = setInterval(
        function() {
          if (index === indexOfLastImage) { index = 0 }

          img.src = images[++index]
        }
      , 3000
      )
    }

    pause = function() {
      clearInterval(playInterval)
      playInterval = null
    }


    goToPrevious = function() {
      // if the slideshow was running
      if (playInterval) { pause() }
      // if we're at the beginning of the array
      if (index === 0) {
        index = indexOfLastImage + 1
      }
      img.src = images[--index]
    }

    goToNext = function() {
      // if the slideshow was running
      if (playInterval) { pause() }
      // if we're at the beginning of the array
      if (index === indexOfLastImage) {
        index = -1
      }
      img.src = images[++index]
    }


    beginSlideShow = function() {
      // add listeners
      playBtn.addEventListener('click', play)
      pauseBtn.addEventListener('click', pause)
      prevBtn.addEventListener('click', goToPrevious)
      nextBtn.addEventListener('click', goToNext)
      // set initial image for display prior to first interval
      img.src = images[index]
      // kick off auto play
      play()
    }

    // This is what attached to and will fire on the DOMContentLoaded event
    return beginSlideShow

  }())
)

qaru.site

слайдшоу » Скрипты для сайтов

19.03.2013 5 314 Slider

iView — адаптивный jQuery слайдер

Плагин для создания красивейших слайдеров — iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

04.03.2013 2 361 Slider

Плагин микро галереи

Плагин для создания микро галереи на сайте. Автопоказ, возможность добавления описания для каждого изображения, и режим листания по кругу, т.е. зацикливание.

01.02.2013 1 547 Slider

Плагин слайдшоу popeye

Плагин jQuery.popeye это элегантное и красивое решение для показа галереи изображении не покидая страницы. На странице отображается только одно фото, при наведении появляется возможность пролистать или увеличить все изображения в данном наборе. Плагин прост в установке и настройке и разрабатывался, как альтернатива часто использующихся lightbox2, fancybox или colorbox, которые используют модальные окна.

23.11.2012 10 373 Slider

FlexSlider — адаптивный слайдер

Отличный адаптивный jQuery слайдер — FlexSlider. Включает возможность навигации bullet (точками), позволяет использовать миниатюры вкупе с навигацией, возможность вставки видео в качестве слайда, опция карусели, а также плагин имеет небольшое API.

12.09.2012 6 525 Slider

Mobilyslider — простой jQuery слайдер

Mobilyslider — простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.

07.06.2012 2 131 Slider

Полноэкранный разрезной слайдер

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

09.05.2012 1 128 Slider

Аудио слайдшоу с jPlayer

Слайдшоу на jQuery с музыкальным сопровождением с помощью кросс платформенной библиотеки jPlayer. Смена слайдов происходит в указанные промежутки музыкальной композиции.

04.05.2012 1 281 Slider

Rhinoslider — плагин слайдшоу

Rhinoslider — довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру. На официальной странице плагина имеется удобный генератор эффектов — генератор — определившись с выбором можно сразу скачать сгенерированный рабочий пример.

03.05.2012 2 810 Slider

Lof JSliderNews 2.0 — плагин слайдшоу

Плагин слайдшоу базирующийся на jQuery и плагине easing. Добавлена возможность прокрутки слайдов с помощью колесика мышки. На демо страницах представлены различные варианты использования навигации по слайдам.

12.04.2012 2 729 Slider

Слайдшоу с jmpress.js

Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.

15.03.2012 5 451 Slider

Easy Slider — простой слайдер

Простой слайдер на jQuery — easy slider — с элементами навигации по изображениям. У слайдера около 20 настроек.

11.03.2012 1 545 Slider

Презентация нового продукта (слайдер)

Чтобы привлечь покупателей к покупке нового продукта, нужно его красиво подать и рассказать о нём всё самое важное. И чтобы усилить эффект и придать уникальности мы сегодня сделаем необычный слайдер.

pcvector.net