Первое уменьшается и заменяется рядом на второе, которое увеличивается из точки, Фото можно поставить сколько захочется. Пимер
В этом скрипте прописываем адреса ваших картинок и ставим в head:
Code
<script type="text/javascript">
<!--
pics=new Array() pics[0]=new Array("КАРТИНКА 1","../webplus/popup/note.htm?Page 1")
pics[1]=new Array("КАРТИНКА 2","../webplus/popup/note.htm?Page 2")
pics[2]=new Array("КАРТИНКА 3","../webplus/popup/note.htm?Page 3")
pics[3]=new Array("КАРТИНКА 4","../webplus/popup/note.htm?Page 4")
pause=3 // seconds
step= 10
function initslide(){
document.getElementById("pic_one").width=1
document.getElementById("pic_two").width=210
p1x=parseInt(document.getElementById ("pic_one").style.left)
p1w=document.getElementById("pic_one").width
p2w=document.getElementById("pic_two").width
document.getElementById ("pic_one").src=pics[1][0]
document.getElementById("pic_two").src=pics[0][0]
posx=p1x
w1=0
w2=p2w
num=0
picnum=2
animate()
}
function animate(){
if(picnum>pics.length-1){picnum=0}
posx+=step
w1+=step
w2-=step
timer=setTimeout("animate()",50)
if(num==0){
document.getE lementById("pic_one").style.width=w1
document.getElementById("pic_two").style.width=w2
document.getElementById("pic_two").style.left=posx
i f(w2<step){
document.getElementById("pic_two").style.left=p1x
document.getElementById("pic_two").style.width=p1w
document.getElementById( "pic_two").src=pics[picnum++][0]
posx=p1x
w1=0
w2=p2w
num=1
clearTimeout(timer)
setTimeout("animate()",pause*1000)
}
}
if(num==1){
document.getElementById("pi c_two").style.width=w1
document.getElementById("pic_one").style.width=w2
document.getElementById("pic_one").style.left=posx
if(w2<step) {
document.getElementById("pic_one").style.left=p1x
document.getElementById("pic_one").style.width=p1w
document.getElementById("pic_one") .src=pics[picnum++][0]
posx=p1x
w1=0
w2=p2w
num=0
clearTimeout(timer)
setTimeout("animate()",pause*1000)
}
}
}
// add onload="initslide()" to the opening BODY tag
</script>
Code
<BODY> заменяем на <BODY onload="initslide()">
Это в код HTML
Code
<img src="" id="pic_one" alt="1" style="position:absolute; left:300px; top:100px;z-index:1">
<img src="" id="pic_two" alt="2" style="position:absolute; left:300px; top:100px;z-index:2">