Javascript-форум - помогите допилить скрипт с setTimeout();

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - помогите допилить скрипт с setTimeout(); (https://javascript.ru/forum/dom-window/42319-pomogite-dopilit-skript-s-settimeout-%3B.html)

помогите допилить скрипт с setTimeout();

Пишу сайт, в различных слайдерах острой необходимости нет, но в одной части страницы простая смена изображений всё же нужна. Код в принципе рабочий, вот только одно НО, при возврате на страницу изображения начинают "моргать", но только если переход был из другого окна браузера, при переходе по страницам сайта всё нормально, правда исключение только 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>

THFC,
а так ?

<!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 = image_count;
var timeout;
var opacity = 1;
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)+')';
    var time = time_out;
	if (opacity<1) {
 	opacity = 100;
    i++;
	if (i>image_count) i=1;
    time = interval;
	}
    timeout = setTimeout("change_image()", time);
}

  window.onload=change_image;

</script>
</head>
<body>
<div class="container">
<div id="one">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="img_1" width="545px" height="245px" alt=""></div>
<div id="two">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" id="img_2" width="545px" height="245px" alt=""></div>
<div id="three">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" id="img_3" width="545px" height="245px" alt=""></div>
<div id="four">
<img src="http://javascript.ru/forum/images/smilies/victory.gif" id="img_4" width="545px" height="245px" alt=""></div>
<div id="five">
<img src="http://javascript.ru/forum/images/smilies/write.gif" id="img_5" width="545px" height="245px" alt=""></div>
</div> <!-- end container -->
</body>
</html>

Спасибо за window.onload

рони, ОГРОМНОЕ СПАСИБО! Всё ОТЛИЧНО!. Пробовал сам разобраться, да опыта ещё нет. Только интуитивно понимал что где-то onload... Сейчас только простматривал Фланагана стр.272 13.5.7.Манипулирование документом в процессе загрузки.
"... на первый взгляд большинство браузеров предоставляют сценариям возможность манипулировать любыми элементами документа. Некоторые JavaScript-программисты исходят из этого предположения.Однако ни в одном стандарте это не регламентируется, и опытные JavaScript-программисты знают, что если не определено обратное, манипулирование элементами документа из сценариев размещенных в тегах <script>, может вызвать проблемы(возможно лишь иногда, лишь в некоторых браузерах, или лишь тогда, когда происходит перезагрузка документа или возврат к предыдущей странице после щелчка на кнопке Назад). "

Ребята может подскажете. У меня конфликт двух кусков кода, а в чем конфликт я не пойму. Первый такойже как и тут:

<script type="text/javascript">
var image_count = 5;
var interval = 6000;
var time_out = 20;
var i = image_count;
var timeout;
var opacity = 1;
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)+')';
    var time = time_out;
	if (opacity<1) {
 	opacity = 100;
    i++;
	if (i>image_count) i=1;
    time = interval;
	}
    timeout = setTimeout("change_image()", time);
}

  window.onload=change_image;
</script>

Второй /js/gallery_scroll.js для скролинга картинок.

// JavaScript Document
function galleryScroll(idButtonLeft,idButtonRight,idContainer){
	this.cnt=document.getElementById(idContainer);
	this.cnt._step=10;
	this.bl=document.getElementById(idButtonLeft);
	this.br=document.getElementById(idButtonRight);
	this.bl._setState=this.br._setState=function(state){
		if(!this._$.buttonInactiveClass)return;
		if(!this._isDefaultClassName){
			this._defaultClassName=this.className;
			this._isDefaultClassName=true;
		};
		this.className=state ? this._defaultClassName : this._$.buttonInactiveClass;
	};
	this.bl.onmousedown=function(){this._$.cnt._scroll(-1);};
	this.bl.onmouseup=function(){this._$.cnt._stopScroll();};
	this.br.onmousedown=function(){this._$.cnt._scroll(1);};
	this.br.onmouseup=function(){this._$.cnt._stopScroll();};
	this.cnt._stopScroll=function(){window.clearInterval(this._timerId);this._timerId=0;};
	this.cnt._scroll=function(direction){
		var leftDir=this.scrollLeft==0,
			rightDir=this.scrollLeft==this.scrollWidth-this.offsetWidth,
			isEnd=direction<0 ? leftDir : rightDir;
		if(this._timerId && isEnd)this._stopScroll();
		else if(!this._timerId && !isEnd)this._timerId=window.setInterval(function(o,direction){return function(){o._scroll(direction);}}(this,direction),30);
		this.scrollLeft+=this._step*direction;
		this._$.bl._setState(!leftDir);
		this._$.br._setState(!rightDir);
	};
	var func=function(o){return function(e){
		e=e||window.event;
		if(e.wheelDelta)o._scroll(-1*e.wheelDelta/120);
		else if(e.detail)o._scroll(e.detail/3);
		o._stopScroll();
		if(e.stopPropagation)e.stopPropagation();else e.cancelBubble=true;
		if(e.preventDefault)e.preventDefault();else e.returnValue=false;
	}}(this.cnt);
	if(this.cnt.attachEvent!=undefined)this.cnt.attachEvent('onmousewheel',func);
	else if(this.cnt.addEventListener)this.cnt.addEventListener('DOMMouseScroll',func,false);
	this.cnt.onmousewheel=func;
	
	for(i in this)if(this[i])this[i]._$=this;
	this.setButtonInactiveClass=function(className){
		this.buttonInactiveClass=className;
		this.bl._setState(false);
	};
	this.setShaders=function(png,width){
		var cnt=this.cnt.parentNode.insertBefore(document.createElement('div'),this.cnt),
			sh1=cnt.appendChild(document.createElement('div')),
			sh2=cnt.appendChild(document.createElement('div'));
		sh1.style.position=sh2.style.position=cnt.style.position='absolute';
		sh1.style.width=sh2.style.width=width+'px';
		sh1.style.height=sh2.style.height=this.cnt.offsetHeight+'px';
		sh1.style.background='url('+png+') repeat-y 0 0';
		sh2.style.background='url('+png+') repeat-y 100% 0';
		sh2.style.left=(this.cnt.offsetWidth-sh2.offsetWidth)+'px';
	};
};

<script type="text/javascript">
function initGalleryScroll(){	
	var gs=new galleryScroll('buttonScrollLeft2','buttonScrollRight2','scrollContainer2');
	gs.setButtonInactiveClass('inactive');
	gs.setShaders('/images/shader.png',50);
};
if(typeof document.attachEvent!='undefined')window.attachEvent('onload',initGalleryScroll);
else window.addEventListener('load',initGalleryScroll,false);
</script>

первй работает только если второй не вставлять, а второй работает и с первым ... Выдает мне ошибку:
[Error] TypeError: 'null' is not an object (evaluating 'document.getElementById(current_image).style')
change_image (img.php, line 374)

Цитата:

Сообщение от macik

05var i = image_count;

Цитата:

Сообщение от macik

for(i in this)

замените везде i либо в 1 скрипте либо во втором