| |
|
|
| | Клиент захотел чтобы 2 картинки по очереди сменяли друг друга по кругу. Flash он не хочет и gif не хочет (потеря качества). Придумал ему вариант на Javascript. Нашел наработки в интернете и чуть подправил. Но смущает небольшая проблема в начале - картинка пытается смениться, но не выходит, и лишь со второй попытки получается. Так как в javascript не силен, прошу вашего совета. Пока 2 картинки, но возможно будет и больше. Вот код.
<script language="JavaScript">
var slide = new Array;
var pictureName = new Array("1.jpg", "2.jpg");
for (var i = 0; i < pictureName.length; i++)
{
slide[i] = new Image();
slide[i].src = pictureName[i];
}
var m = new Array(0, 100);
var nextImage = 0;
var t = "";
function next(step)
{
if (t != "") return;
m[0] = 0;
m[1] = 100;
nextImage = nextImage + step;
if (nextImage == pictureName.length)
{
nextImage = 0;
}
if (nextImage == -1)
{
nextImage = pictureName.length - 1;
}
document.getElementById("after").src = slide[nextImage].src;
change_slide();
}
function change_slide()
{
m[0] += 1;
m[1] -= 1;
document.getElementById("before_div").style.opacity = m[1]/100;
document.getElementById("after_div").style.opacity = m[0]/100;
document.getElementById("after_div").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("before_div").style.filter="alpha(opacity="+m[1]+")";
t = setTimeout("change_slide()",5);
if (m[0] > 98)
{
clearTimeout(t);
document.getElementById("before").src = slide[nextImage].src;
document.getElementById("before_div").style.opacity = 100;
document.getElementById("before_div").style.filter="alpha(opacity=0)";
t = "";
}
}
function f1 (){
b=setTimeout("f1()",2500); next(1);
}
f1();
</script>
<div id="after_div" style="position: absolute; top: 0px; left: 130px;"><img id="after" src="2.jpg"></div>
<div id="before_div" style="position: absolute; top: 0px; left: 130px;"><img id="before" src="1.jpg"></div>
|
| |
| |
|
|
| |
 4.8 Кб |
|
| |
для: Indemion
(03.06.2009 в 11:54)
| | | может это? | |
| |
|
|
| |
|
|
| |
для: Рома
(03.06.2009 в 19:04)
| | | Почти. У меня плавный переход. Я поработал на своим и вашим кодом, и добился нужного результата. Большое спасибо! :) | |
| |
|
|
