Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2013, 02:13
Новичок на форуме
Отправить личное сообщение для THFC Посмотреть профиль Найти все сообщения от THFC
 
Регистрация: 18.05.2013
Сообщений: 6

помогите допилить скрипт с 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, 22.10.2013 в 02:37. Причина: исправление ошибок
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2013, 03:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2013, 04:01
Новичок на форуме
Отправить личное сообщение для THFC Посмотреть профиль Найти все сообщения от THFC
 
Регистрация: 18.05.2013
Сообщений: 6

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

Последний раз редактировалось THFC, 22.10.2013 в 04:04. Причина: исправление ошибки
Ответить с цитированием
  #4 (permalink)  
Старый 17.06.2014, 01:38
Аспирант
Отправить личное сообщение для macik Посмотреть профиль Найти все сообщения от macik
 
Регистрация: 17.06.2014
Сообщений: 32

Ребята может подскажете. У меня конфликт двух кусков кода, а в чем конфликт я не пойму. Первый такойже как и тут:
<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)
Ответить с цитированием
  #5 (permalink)  
Старый 17.06.2014, 02:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от macik
05var i = image_count;
Сообщение от macik
for(i in this)
замените везде i либо в 1 скрипте либо во втором
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите допилить скрипт jQuery Flight Board maloicds Библиотеки/Тулкиты/Фреймворки 0 26.09.2013 15:44
Помогите допилить скрипт свертывания и развертывания razorg1991 Ваши сайты и скрипты 7 06.09.2013 21:54
Помогите вставить скрипт на страницу alexsio Работа 7 22.04.2013 18:19
Помогите настроить скрипт раскрывающегося меню melomanfm Работа 6 10.08.2009 01:21
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05