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

Содержание

Создаем слайд-шоу на 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

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

19.03.2013 5 476 Slider

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

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

04.03.2013 2 423 Slider

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

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

01.02.2013 1 585 Slider

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

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

23.11.2012 10 648 Slider

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

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

12.09.2012 6 719 Slider

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

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

07.06.2012 2 208 Slider

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

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

09.05.2012 1 157 Slider

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

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

04.05.2012 1 313 Slider

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

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

03.05.2012 2 883 Slider

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

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

12.04.2012 3 177 Slider

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

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

15.03.2012 5 612 Slider

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

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

11.03.2012 1 607 Slider

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

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

pcvector.net

Создаем слайдшоу с помощью jmpress.js

Возможно Вы уже видели impress.js, действительно отличную JavaScript-библиотеку для создания 3D-презентаций. jQuery плагин jmpress.js позволит Вам использовать эту библиотеку вместе с jQuery, с некоторыми дополнительными опциями. Мы хотим показать вам сегодня, как использовать этот замечательный плагин для создания слайд-шоу с 3D-эффектами.

Значки, используемые в демо от Artcore Illustration, и используются они по Creative Commons BY-NC-ND 3.0 license.

Итак, давайте начнем!

HTML-разметка

У нас будет один главный контейнер с классом jms-slideshow. Внутри, у нас будет несколько подразделов с классом step. Это будут наши слайды. Каждый шаг или слайд получит класс data-color, он нужен за определения цвета фона и некоторых атрибутов данных от jmpress.js. Вы можете найти все (встроенные) опции здесь: jmpress.js Documentation – Options. Мы будем использовать некоторые атрибуты для того, чтобы определить позицию и вращение слайдов в 3D-пространстве:

<section>

<div data-color=»color-1″>
<div>
<h4>Some headline</h4>
<p>Some text</p>
<a href=»#»>Read more</a>
</div>
<img src=»images/1.png» />
</div>

<div data-color=»color-2″ data-y=»500″ data-scale=»0.4″ data-rotate-x=»30″>
<!— … —>
</div>

<!— … —>

</section>

Теперь займемся стилями.

CSS

Мы зададим ширину основного контейнера в процентах, при этом определим минимальные и максимальные значения:

.jms-slideshow {
position: relative;
width: 80%;
max-width: 1400px;
min-width: 640px;
margin: 20px auto;
height: 460px;
}

Следующий блок-обертка будет добавлен динамически, и это будет видимая оболочка слайд-шоу:

.jms-wrapper {
width: auto;
min-width: 600px;
height: 440px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 10px solid #fff;
border: 10px solid rgba(255, 255, 255, 0.9);

outline: none;
transition: background-color 1s linear;
}

Классы для фона будут применяться к предыдущему блоку-обертке. Класс определяется в атрибуте данных data-color на каждом шаге. Это дает нам возможность добавить цвет фона для каждого слайда и изменить его при переходе.

.color-1 {
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.color-2 {
background-color: #EBBBBC;
background-color: rgba(235, 187, 188, 1);
}
.color-3 {
background-color: #EED9C0;
background-color: rgba(238, 217, 192, 1);
}
.color-4 {
background-color: #DFEBB1;
background-color: rgba(223, 235, 177, 1);

}
.color-5{
background-color: #C1E6E5;
background-color: rgba(193, 230, 229, 1);
}

Шаги или слайды будут иметь следующие стили:

.step {
width: 900px;
height: 420px;
display: block;
transition: opacity 1s;
}
.step:not(.active) {
opacity: 0;
}

Неактивные шаги будут иметь прозрачность равную 0. Когда слайды перемещаются, прозрачность будет установлена равной 1.

Внутренние части слайда будут иметь следующие стили:

.jms-content{
margin: 0px 370px 0px 20px;
position: relative;
clear: both;
}
.step h4{
color: #fff;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}

Ссылка «Читать далее» будет иметь небольшую анимацию: как только шаг становится активным, она будет двигаться вверх и появляться:

a.jms-link{
color: #fff;
text-transform: uppercase;
background: linear-gradient(top, #969696 0%,#727272 100%);
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}

Изображение будет позиционироваться абсолютно на правой стороне каждого слайда:

.step img{
position: absolute;
right: 0px;
top: 30px;
}

Навигация в виде точек будет располагаться в нижней части:

.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
user-select: none;
}

Тег span будет в виде темной маленькой точки:

.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}

С помощью псевдо-класса :after, активный пункт навигации будет выглядеть как маленькая белая точка:

.jms-dots span.jms-dots-current:after{
content: »;
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

Стрелки навигации будут расположены на левой и на правой стороне слайд-шоу. Мы будем использовать фоновые изображения для стрелок:

.jms-arrows{
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}

Со стилями мы разобрались, теперь давайте перейдем к JavaScript!

JavaScript

Как уже говорилось выше, мы будем использовать плагин jmpress.js для создания нашего слайд-шоу. Хотя вы можете использовать любые из его многочисленных функций, мы будем использовать только необходимые нам настройки для создания нашего скрипта. Вы можете прочитать больше о возможностях, которые предлагает jmpress.js, здесь.

Мы создадим jQuery плагин для слайд-шоу. Мы можем вызвать плагин следующим образом:

$( ‘#jms-slider’ ).jmslideshow();

Параметры для плагина jmpress определяются как параметры по умолчанию в нашего плагина:

jmpressOpts : {
// set the viewport
viewPort        : {
height : 400,
width   : 1300,
maxScale: 1
},
fullscreen      : false,
hash            : { use : false },
mouse           : { clickSelects : false },
keyboard        : { use : false },
animation       : { transitionDuration : ‘1s’ }
},

Вы можете изменить их в плагине слайд-шоу, или передать определенное значение при инициализации плагина. В качестве примера:

// specify the jmpress options
var jmpressOpts = {
animation       : { transitionDuration : ‘0.8s’ }
};

// call the jmslideshow plugin
$( ‘#jms-slideshow’ ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay    : true,
bgColorSpeed: ‘0.8s’,
arrows      : false
}));

Ниже приводится набор доступных параметров, которые можно использовать для слайд-шоу:

$.JMSlideshow.defaults      = {
// options for the jmpress plugin.
// you can add more options…
jmpressOpts : {
// set the viewport
viewPort        : {
height : 400,
width   : 1300,
maxScale: 1
},
fullscreen      : false,
hash            : { use : false },
mouse           : { clickSelects : false },
keyboard        : { use : false },
animation       : { transitionDuration : ‘1s’ }
},
// for this specific plugin we will have the following options:
// скрыть/показать стрелки навигации
arrows      : true,
// скрыть/показать навигацию на слайдах в виде точек
dots        : true,
// скорость анимации фона
bgColorSpeed: ‘1s’,
// автопроигрывание слайд шоу
autoplay    : false,
// время между переходами для слайд шоу
interval    : 3500
};

После того, как плагин слайд-шоу вызывается, первая функция, которая выполняется — это функция инициализации:

_init : function( options ) {

this.options        = $.extend( true, {}, $.JMSlideshow.defaults, options );

// the slides
this.$slides        = $(‘#jms-slider’).children(‘div’);
// total number of slides
this.slidesCount    = this.$slides.length;
// step’s bgcolor
this.colors         = $.map( this.$slides, function( el, i ) { return $( el ).data( ‘color’ ); } ).join( ‘ ‘ );
// build the necessary structure to run jmpress
this._layout();
// initialize the jmpress plugin
this._initImpress();
// if support (function implemented in jmpress plugin)
if( this.support ) {

// load some events
this._loadEvents();
// if autoplay is true start the slideshow
if( this.options.autoplay ) {

this._startSlideshow();
}
}
},

В функции _layout мы создаем необходимые структуры для плагин jmpress. Кроме того, мы будем добавлять стрелки/точки навигации в случае, если они устанавлены как true в настройках.

_layout             : function() {
// adds a specific class to each one of the steps
this.$slides.each( function( i ) {
$(this).addClass( ‘jmstep’ + ( i + 1 ) );
} );
// wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
this.$jmsWrapper    = this.$slides.wrapAll( ‘<div/>’ ).parent();
// transition speed for the wrapper bgcolor
this.$jmsWrapper.css( {
‘-webkit-transition-duration’ : this.options.bgColorSpeed,
‘-moz-transition-duration’ : this.options.bgColorSpeed,
‘-ms-transition-duration’ : this.options.bgColorSpeed,
‘-o-transition-duration’ : this.options.bgColorSpeed,
‘transition-duration’ : this.options.bgColorSpeed
} );
// добавляем стрелки навигации
if( this.options.arrows ) {
this.$arrows    = $( ‘<nav/>’ );
if( this.slidesCount > 1 ) {
this.$arrowPrev = $( ‘<span/>’ ).appendTo( this.$arrows );
this.$arrowNext = $( ‘<span/>’ ).appendTo( this.$arrows );
}
this.$el.append( this.$arrows )
}
// добавляем навигацию в виде точек
if( this.options.dots ) {
this.$dots      = $( ‘<nav/>’ );
for( var i =