Простой jQquery слайд шоу без плагина

19-04-2010

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

Посмотрели…что у нас получится) теперь приступим, создаем html документ с вот таким вот содержимым body:

<div class="slidshow">
  <img src="images/first.jpg">
  <img src="images/second.jpg">
  <img src="images/third.jpeg">
</div>

Ну здесь должно быть все понятно, див с тремя картинками находящимися от текущего html файла на расстоянии одной директории images, далее пишем css код:

.slidshow {
	position:relative;
}
.slidshow img {
	position:absolute;
	left:0;
	top:0;
	width:500px;
	height:375px;
}

Здесь мы ставим для картинок абсолютное позиционирование и ставим их левый верхний угол, ну и определяем для них одну ширину и высоту что бы при смене они не скакали ). Далее пишем Javascript код точнее jQuery )) но перед этим должны подключить его, лично я его всегда подключаю с гугла… примерно вот так вот:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

А теперь пишем такой вот код:

$(function(){
    $('.slidshow img:gt(0)').hide();//скрываем все картинки кроме 1го
      setInterval(function(){
      $('.slidshow :first-child').fadeOut()//анимированно скрываем 1ую картинку
         .next('img').fadeIn()//и показываем вторую
         .end().appendTo('.slidshow');},2000);//повторяем это каждые 2000 мс
});

Вот и все…

Misha10.25.2010 01:10
Ты красавец! Всё легко, просто и замечательно! =)
Аёха1.27.2011 10:01
Для галереи можно использовать плагин jquery.fancybox
Александр3.14.2011 07:03
Хороший способ украсить шапку например, думаю даже для банеров подойдет, и место секономится и посетителям приятно что сайт не завален рекламой, а то слишком большая насыщеность рекламой как правило отпугивает посетителей
ОСТАВИТЬ КОММЕНТАРИЙ