Можно, всё можно. Но не без труда
Проще всего сделать для Эксплорера, там для этого есть штатные средства. А вот чтобы везде работало...
Приведенный ниже пример работает в основных браузерах.
1. Скачайте библиотеку jQuery и разместите ее на своем сайте. jQuery - это просто javascript-файл.
Можно взять здесь
http://naunaunau.narod.ru/scripts/jquery.js или скачать последнюю версию на сайте проекта
jQuery.comФайл небольшой, порядка 30 кб.
2. "Пропишите" его в разделе HEAD страницы, что-то типа:
<script type="text/javascript" src="/scripts/jquery.js"></script>
3. В разделе HEAD страницы поместите скрипт:
<script type="text/javascript">
var period=5
var imgX=400, imgY=300
// *************************
$(document).ready(function(){setInterval(show_next, period*1000);});
function show_next(arg){
var s='fade normal up up2 down left right center show'.split(' ')
for(var i=0; i<s.length; i++){
if(s[i].match(/normal$|show$|fade$|up2$/gim)) var el=$('#show_'+s[i]+' img:first').hide();
if(s[i]=='left') var el=$('#show_left img:first').css({left:(-imgX)+'px'});
if(s[i]=='right') var el=$('#show_right img:first').css({left:(imgX)+'px'});
if(s[i]=='up') var el=$('#show_up img:first').css({top:(-imgY)+'px'});
if(s[i]=='down') var el=$('#show_down img:first').css({top:(imgY)+'px'});
if(s[i]=='center')var el=$('#show_center img:first').css({left:(imgX/2)+'px',top:(imgY/2)+'px',width:'1px',height:'1px',opacity:'0'});
$('#show_'+s[i]).append(el)
var newel=$('#show_'+s[i]+' img:last')
if(s[i]=='normal') newel.show();
if(s[i]=='show') newel.show('slow');
if(s[i]=='fade') newel.fadeIn('slow');
if(s[i]=='up2') newel.slideDown()
if(s[i].match(/up$|down$|left$|right$/gim)) newel.animate({top: "0",left: "0"}, 500)
if(s[i]=='center') newel.animate({top: "0",left: "0",width: imgX+'px', height:imgY+'px',opacity:'1'}, 500)
}
};
</script>
3. "Настройте" его - задайте свои значения параметров
period - период показа в секундах,
imgX, imgY - размеры картинко в пикселях по горизонтали и вертикали соответственно.
4. Группу картинок (одинакового размера) в коде HTML следует помещать в блочный элемент, например DIV, которому задано
абсолютное или относительное позиционирование !!!, размер блока должен быть равен размеру картинок. Картинки должны иметь абсолютное позиционирование
с равными нулю свойствами top и left (ноль по умолчанию). Например, такие стили:
<style type="text/css">
#show_center, #show_up, #show_up2, #show_left, #show_right, #show_down, #show_normal,#show_show, #show_fade
{
position:relative;
width:400px;
height:300px;
border:1px solid red;
overflow:hidden;
}
#show_center img, #show_up img, #show_up2 img,
#show_left img, #show_right img, #show_down img, #show_normal img,
#show_show img, #show_fade img
{
position:absolute;
top:0;left:0;
}
</style>
Элемент-обертка должен иметь атрибут ID c одним из вышеприведенных (в style) значений, например:
<div id="show_fade">
<img src=559247836_1.jpg width=400 height=300>
<img src=559247836_2.jpg width=400 height=300>
<img src=559248116.jpg width=400 height=300>
</div>
В зависимости от ID будут применяться различные эффекты:
show_normal - обычная "мгновенная" смена картинок;
show_up - новая картинка "выезжает" сверху;
show_up2 - то же, вариант;
show_left - новая картинка "выезжает" слева;
show_right - новая картинка "выезжает" справа;
show_down - картинка "выезжает" снизу;
show_center - картинка появляется из центра;
show_show - картинка плавно появляется из левогг верхнего угла;
show_fade - плавная замена картинки.
Если на странице будут использоваться не все эффекты, то лишние проверки (if) в скрипте можно удалить.
Это, конечно, не все эффекты. "Придумывать" их можно бесконечно
