Пишу сайт, в различных слайдерах острой необходимости нет, но в одной части страницы простая смена изображений всё же нужна. Код в принципе рабочий, вот только одно НО, при возврате на страницу изображения начинают "моргать", но только если переход был из другого окна браузера, при переходе по страницам сайта всё нормально, правда исключение только Opera, где всё корректно работает, менее заменты "подёргивания" в Chrome, и неожиданно хуже всего обстоит дело с Firefox. Вот код:
<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<meta charset="utf-8">
<style type="text/css">
body, html { background: #b1b1b1; }
.container {
margin: 100px 0 0 200px;
width: 545px;
height: 245px;
border: 1px dotted #666;
}
#img_1 { position: absolute; }
#img_2, #img_3, #img_4, #img_5 {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<script type="text/javascript">
var image_count = 5;
var interval = 6000;
var time_out = 20;
var i = 0;
var timeout;
var opacity = 100;
function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
document.getElementById(current_image).style.opacity=opacity/100;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity=(100-opacity)/100;
document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
}
}
setInterval (function() {
i++;
if (i>image_count) i=1;
change_image();
}, interval);
</script>
</head>
<body>
<div class="container">
<div><img src="images/one.jpeg" id="img_1" width="545px" height="245px" alt=""></div>
<div><img src="images/two.jpeg" id="img_2" width="545px" height="245px" alt=""></div>
<div><img src="images/three.jpeg" id="img_3" width="545px" height="245px" alt=""></div>
<div><img src="images/four.jpeg" id="img_4" width="545px" height="245px" alt=""></div>
<div><img src="images/five.jpeg" id="img_5" width="545px" height="245px" alt=""></div>
</div> <!-- end container -->
</body>
</html>