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

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

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

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

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

 

<head>
<script type=»text/javascript»>
<!—
var image1=new Image()
image1.src=»/slide1.gif»
var image2=new Image()
image2.src=»/slide2.gif»
var image3=new Image()
image3.src=»/slide3.gif»
//—> 
</script> 
</head>

 

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

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

<body>
<img src=»/slide1.gif» name=»slide» width=450 height=281>
</body>

 

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

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

 


<script type=»text/javascript»>
<!—
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval(«image»+step+».src»)
if (step<3)
step++
else
step=1
setTimeout(«slideit()»,2500)
}
slideit()
//—> 
</script>

 

Основная строка в этом скрипте следующая: 
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>, в то место сайта, где должно отображаться слайд-шоу.

<html>
<head>
<script type=»text/javascript»>
<!—
var image1=new Image()
image1.src=»/slide1.gif»
var image2=new Image()
image2.src=»/slide2″
var image3=new Image()
image3.src=»/slide3.gif»
//—>
</script>
</head>
<body>
<img src=»/slide1.gif» name=»slide» />
<script>
<!—
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval(«image»+step+».src»)
if (step<3)
step++
else
step=1
setTimeout(«slideit()»,2500)
}
slideit()

//—> 
</script> 
</body> 
</html>

djshuric.livejournal.com

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

5 476 Slider

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

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

iView - адаптивный jQuery слайдер 2 423 Slider

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

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

Плагин микро галереи
1 585 Slider

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

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

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

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

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

FlexSlider - адаптивный слайдер 6 719 Slider

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

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

Mobilyslider - простой jQuery слайдер 2 208 Slider

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

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

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

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

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

Аудио слайдшоу с jPlayer 1 313 Slider

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

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

Rhinoslider - плагин слайдшоу 2 883 Slider

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

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

Lof JSliderNews 2.0 - плагин слайдшоу 3 177 Slider

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

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

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

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

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

Easy Slider - простой слайдер 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 =

www.webmasters.by