Сейчас попробуем написать простой слайд шоу из трех картинок, без кнопок назад и вперед, они просто будут сменять друг друга с заданным интервалом.
<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 мс
});