Плавная смена картинок управляемая кнопками
Вот, попросили так сделать, решил выложить.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>slideShow</title>
<script language="javascript">
<!--
a=5
t=6 //Время плавного появления/исчезновения
r=10 //Номер старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img
a_i=new Array()
for(c=0;c<=r;c++){
a_i[c]=new Image()
a_i[c].src='img/'+c+'.jpg'}
$=function(id){return document.getElementById(id)}
function slide_click(new_img){
$('B1').disabled=true
$('B2').disabled=true
for (var c=99;c>=0;c--){
setTimeout(function (c,n){return function(){sets(c,n)}}(c,new_img),t*(100-c))}
}
function sets(c,n){
if (c==0){
$('slide').src=n.src
for (c=1;c<=100;c++){
setTimeout(function (c,n){return function(){sets(c,n)}}(c,n),t*c)
if (c==100){$('B1').disabled=false;$('B2').disabled=false;return}}
}
if ($('slide').filters){
$('slide').style.filter='alpha(opacity='+c+')'}
else{
$('slide').style.opacity=c/100}
}
//-->
</script>
</head>
<body>
<br><img src=img/0.jpg id=slide align="left">
<input id="B1" type="button" value="Вперед" onclick="slide_click(a_i[a+=1])">
<input type="button" value="Назад" id="B2" onclick="slide_click(a_i[a-=1])">
</body>
</html>[/HTML]
Кэширования нет, потому в IE дергается.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>slideShow</title>
<script language="javascript">
<!--
a=5
t=6 //Время плавного появления/исчезновения
r=10 //Номер старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img
a_i=new Array()
for(c=0;c<=r;c++){
a_i[c]=new Image()
a_i[c].src='img/'+c+'.jpg'}
$=function(id){return document.getElementById(id)}
function slide_click(new_img){
$('B1').disabled=true
$('B2').disabled=true
for (var c=99;c>=0;c--){
setTimeout(function (c,n){return function(){sets(c,n)}}(c,new_img),t*(100-c))}
}
function sets(c,n){
if (c==0){
$('slide').src=n.src
for (c=1;c<=100;c++){
setTimeout(function (c,n){return function(){sets(c,n)}}(c,n),t*c)
if (c==100){$('B1').disabled=false;$('B2').disabled=false;return}}
}
if ($('slide').filters){
$('slide').style.filter='alpha(opacity='+c+')'}
else{
$('slide').style.opacity=c/100}
}
//-->
</script>
</head>
<body>
<br><img src=img/0.jpg id=slide align="left">
<input id="B1" type="button" value="Вперед" onclick="slide_click(a_i[a+=1])">
<input type="button" value="Назад" id="B2" onclick="slide_click(a_i[a-=1])">
</body>
</html>[/HTML]
Кэширования нет, потому в IE дергается.