Понедельник, 02 Июля 2012 15:43

Красивый слайдер картинок с интересными эффектами от kate-land

Written by 
Оцени эту запись
(11 Голоса)

В этой статей хочу показать очередную версию слайдера картинок с интересными эффектами - появление картинки вертикальными полосками, квадратиками. Причем, эффекты смены картинок выбираются по рандому из трех вариантов.

 

 

Демо

 

Подробнее о эффектах.

Первый эффект - полосочки:

 

 

Здесь мы при помощи jQuery вставляем в контейнер блок, в него еще пять блоков высотой 100% родительского, шириной - 5-ая часть родительского. У каждого из внутренних блоков абсолютное позиционирование, фоновая картинка и соответствующее позиционирование картинки.

 

Второй эффект - квадратики, которые постепенно появляются с верхнего левого угла:

 

 

Здесь внутренний див делим на 5 частей по горизонтали и на 3 части по вертиками. Появляются с левого верхнего угла в нижний правый.

 

Третий эффект - появление квадратиков в случайном порядке:

 

 

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

 

HTML:

 

 
<div class="image_holder">
<img src="/images/slider1.jpg">
<img src="/images/slider2.jpg">
<img src="/images/slider3.jpg">
<img src="/images/slider4.jpg">
<img src="/images/slider5.jpg">
</div>
 
CSS:
 
-
Для подключения слайдера на страницу, нужно подключить библиотеку jQuery и файл, в котором описаны три эффекта слайда:
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/js/slider_parts.js" type="text/javascript"></script> 
 
 
Для использовании анимации слайда на своей странице, нужно в теле прописать его инициализацию: 
 
 
 
<script>
$(document).ready(function(){
$('.image_holder').css('position', 'relative');
$('.image_holder').children('img').css('display', 'none');
$('.image_holder').css('width', '620px').css('height', '330px');
$('.image_holder').css('background', 'url('+$('.image_holder').children('img').eq(0).attr('src')+')');
var index = 1;
var e = $('.image_holder');
var z = e.children('img').size();
setInterval(function(){
var r = Math.floor(Math.random() * 3);
if(r==0){SliderEffect1(e,index,z);}
if(r==1){SliderEffect2(e,index,z);}
if(r==2){SliderEffect3(e,index,z);}
if(index<z-1) {
index++;
}
else {
index = 0;
}
}, 5000);
});
</script>
 
 
 
Здесь мы используем все три эффекта, которые подбираются рандомно. Можно использовать только один, например, полосочки:
 
 
<script>
$(document).ready(function(){
$('.image_holder').css('position', 'relative');
$('.image_holder').children('img').css('display', 'none');
$('.image_holder').css('width', '620px').css('height', '330px');
$('.image_holder').css('background', 'url('+$('.image_holder').children('img').eq(0).attr('src')+')');
var index = 1;
var e = $('.image_holder');
var z = e.children('img').size();
setInterval(function(){
SliderEffect1(e,index,z);
if(index<z-1) {
index++;
}
else {
index = 0;
}
}, 5000);
});
</script>
 
 
Содержание файла slider_parts.js:
 
 
function SliderEffect1(a,i,count){
var b = $(a).children('img').eq(i);
a.append('<div class="parts_holder"></div>');
a.children('.parts_holder').css('width', b.width()).css('height', b.height()).css('position', 'absolute').css('top', '0px').css('left', '0px').css('overflow', 'hidden');
b.css('display', 'none');
var c = b.width()/count;
var count;
for(k=1;k<=count;k++){
a.children('.parts_holder').append('<div class="part'+k+'"></div>');
a.children('.parts_holder').children('.part'+k).css('width', c).css('position', 'absolute').css('top', -b.height()).css('left', c*(k-1)).css('background', 'url('+b.attr('src')+')').css('background-position', -c*(k-1)+'px 0px').css('height', b.height());
}
for(k=1;k<=count;k++){
a.children('.parts_holder').children('.part'+k).animate({'top' : '0px'}, 0+(k*300));
}
setTimeout(function(){
a.css('background', 'url('+$('.image_holder').children('img').eq(i).attr('src')+')');
$('.image_holder').children('.parts_holder').remove();
}, 1300);
}
 
function SliderEffect2(a,i,count){
var b = $(a).children('img').eq(i);
a.append('<div class="parts_holder"></div>');
a.children('.parts_holder').css('width', b.width()).css('height', b.height()).css('position', 'absolute').css('top', '0px').css('left', '0px').css('overflow', 'hidden');
b.css('display', 'none');
var c = b.width()/count;
var l = b.height()/3;
var count;
for(k=1;k<=count;k++){
for(p=1;p<=3;p++){
a.children('.parts_holder').append('<div class="part'+k+''+p+'"></div>');
a.children('.parts_holder').children('.part'+k+''+p).css('width', c).css('position', 'absolute').css('top', l*(p-1)).css('left', c*(k-1)).css('background', 'url('+b.attr('src')+')').css('background-position', -c*(k-1)+'px '+(-l*(p-1))+'px').css('height', l).css('opacity', '0');
}
}
 
for(k=1;k<=count;k++){
for(p=1;p<=3;p++){
a.children('.parts_holder').children('.part'+k+''+p).animate({'opacity' : '1'}, 0+(k*500)+(p*500));
}
}
setTimeout(function(){
a.css('background', 'url('+$('.image_holder').children('img').eq(i).attr('src')+')');
$('.image_holder').children('.parts_holder').remove();
}, 3500);
}
 
function SliderEffect3(a,i,count){
var b = $(a).children('img').eq(i);
a.append('<div class="parts_holder"></div>');
a.children('.parts_holder').css('width', b.width()).css('height', b.height()).css('position', 'absolute').css('top', '0px').css('left', '0px').css('overflow', 'hidden');
b.css('display', 'none');
var c = b.width()/count;
var l = b.height()/3;
var count;
for(k=1;k<=count;k++){
for(p=1;p<=3;p++){
a.children('.parts_holder').append('<div class="part'+k+''+p+'"></div>');
a.children('.parts_holder').children('.part'+k+''+p).css('width', c).css('position', 'absolute').css('top', l*(p-1)).css('left', c*(k-1)).css('background', 'url('+b.attr('src')+')').css('background-position', -c*(k-1)+'px '+(-l*(p-1))+'px').css('height', l).css('opacity', '0');
}
}
 
a.children('.parts_holder').children('div').eq(13).animate({'opacity' : '1'}, 200);
a.children('.parts_holder').children('div').eq(1).animate({'opacity' : '1'}, 800);
a.children('.parts_holder').children('div').eq(6).animate({'opacity' : '1'}, 400);
a.children('.parts_holder').children('div').eq(12).animate({'opacity' : '1'}, 900);
a.children('.parts_holder').children('div').eq(4).animate({'opacity' : '1'}, 500);
a.children('.parts_holder').children('div').eq(8).animate({'opacity' : '1'}, 200);
a.children('.parts_holder').children('div').eq(7).animate({'opacity' : '1'}, 600);
a.children('.parts_holder').children('div').eq(11).animate({'opacity' : '1'}, 500);
a.children('.parts_holder').children('div').eq(3).animate({'opacity' : '1'}, 300);
a.children('.parts_holder').children('div').eq(5).animate({'opacity' : '1'}, 600);
a.children('.parts_holder').children('div').eq(2).animate({'opacity' : '1'}, 800);
a.children('.parts_holder').children('div').eq(9).animate({'opacity' : '1'}, 1000);
a.children('.parts_holder').children('div').eq(10).animate({'opacity' : '1'}, 300);
a.children('.parts_holder').children('div').eq(14).animate({'opacity' : '1'}, 1000);
a.children('.parts_holder').children('div').eq(0).animate({'opacity' : '1'}, 700);
setTimeout(function(){
a.css('background', 'url('+$('.image_holder').children('img').eq(i).attr('src')+')');
$('.image_holder').children('.parts_holder').remove();
}, 1000);
}
 
 
 
У кого есть вопросы, пишите в комментах.
 
Юзайте, на здоровье!!!
 
 

Комментарии  

 
+1 #7 kat-khmara 02.04.2014 09:47
Спасибо за интерес к моему блогу! :-) Постараюсь делать новые интересные слайдеры!
Цитировать
 
 
+1 #6 Павел 02.04.2014 09:07
Да, я помучался и решил на голом css3 вставить другой слайдер, просто времени мало. А так в вашем примере переходы гораздо эффектнее:) Спасибо за быстрые комментарии)
Цитировать
 
 
+1 #5 kat-khmara 02.04.2014 08:13
Да, дело может быть в размерах. На указанном сайте слайдер вроде другой...
Цитировать
 
 
+1 #4 Павел 02.04.2014 06:54
tagrotrans.com, прошу прощения)
Цитировать
 
 
+1 #3 Павел 02.04.2014 06:53
Во всех. На локальном компьютере в опере смотрел вначале, там моргает. Потом перенес уже на сайт tagrotrans.ru, там вытягивается после анимации. может быть размер изображений не тот, буду думать)
Цитировать
 
 
0 #2 kat-khmara 01.04.2014 13:55
Спасибо! А в каком браузере Вы смотрели?
Цитировать
 
 
0 #1 Павел 01.04.2014 13:42
Хороший легкий слайдер http://kate-land.net/js-jquery/item/109-nice-image-slider, но почему от промаргивается после каждого слайда?
Цитировать
 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов