Форум PHP программистов > Проблема с анимированной сменой изображения

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Проблема с анимированной сменой изображения

kent666

11.01.2012 - 16:33

Всем привет. Помогите разобраться. Пытаюсь сделать анимированную смену изображений

function slide(obj)
{
    var main_div = document.getElementById('slide');
    var move_div;
    var img1;
    var img2;
    var img          = eval(obj);
    var removal      = 10;
    var timePerFrame = 10;
    var left = 0;
    var timer;
    
    if(img.length > 0){
        move_div = document.createElement("div");
        move_div.className = 'image_slide';
        
        img1 = document.createElement("div")
        img2 = document.createElement("div")
        img1.className = 'img';
        img2.className = 'img';
        img1.innerHTML = img['0'];
        img2.innerHTML = img['1'];   
        
        main_div.appendChild(move_div);
        move_div.appendChild(img1);
        move_div.appendChild(img2);
        
        function frame() { // функция для отрисовки
            left++;
            move_div.style.left = -left*removal + 'px';
            if (left*removal >= 490) {
	           clearInterval(timer); // завершить анимацию
            }
        }
        
        function pause() { // функция для отрисовки
        }
        
        var timer = setTimeout(function(){}, 10000);

        var timer = setInterval(frame, timePerFrame);
        
    }    
}

Но почему то не срабатывает пауза в 10 с при загрузке скрипта

var timer = setTimeout(function(){}, 10000);

В чем может быть проблема. Уже пол дня разбираюсь
Заранее спасибо!:)

Спустя 20 минут, 49 секунд (11.01.2012 - 15:54) bodja написал(а):

здесь

Цитата

setTimeout(function(){}, 10000)

вам нужно указать название функции ,а не function(){},
первым аргументом идет калбек ,а тут неясно на что вы ссылаетесь.

setInterval вам не нужен ,
просто запускайте setTimeout в замкнутой функции,до тех пор пока не достигнете нужного значения.

Спустя 6 минут, 54 секунды (11.01.2012 - 16:01) kent666 написал(а):

bodja Так тоже не работает

        function pause() {
            left++;
            if(left > 2){
	           clearInterval(timer); // завершить анимацию
            }
        }
        timer = setTimeout(pause, 10000);

Спустя 2 минуты, 43 секунды (11.01.2012 - 16:04) redreem написал(а):

window.setTimeout(function(){
 timer = setInterval(frame, timePerFrame);
}, 10000);

и var'ы поубирайте где ненужно, например timePerFrame в моем варианте при var не увидится функцией.

Спустя 3 минуты, 34 секунды (11.01.2012 - 16:07) bodja написал(а):

Так работать и не будет ,нужно замкнуть функцию.

       function pause() {
            left++;
            if(left > 2){
	          timer = setTimeout(pause, 25);//вызываем через каждые 25мс пока не достигнем нужного значения left
                        move_div.style.left=left;
            }
        }

Спустя 3 минуты, 41 секунда (11.01.2012 - 16:11) redreem написал(а):

вопрос был про паузу. для паузы он и не пытался функцию pause использовать.
а вообще - логика изначально неверная. сделай отдельно функцию прелоада, которая по сетинтервалу ждет, пока у всех картинок будет отличный от нуля offsetWidth (картинки при этом при загрузке должны быть visibility:hidden). при вызове слайдера сначала запускай прелоад, который позволит продолжить слайдер только по загрузке всех картинок. а таймаут в 10 секунд - это ламерство.

Спустя 4 минуты, 32 секунды (11.01.2012 - 16:16) kent666 написал(а):

Я наверное не правильно объяснил что мне надо!

        function frame() { // функция для отрисовки
            left++;
            move_div.style.left = -left*removal + 'px';
            if (left*removal >= 490) {
	           clearInterval(timer); // завершить анимацию
            }
        }

Это совсем отдельная функция котороя нужна для видимости смещения рисунка его замены!!!
Мне нужна сейчас такая функция которая остановила на 10 с смещение рисунка!!
А то получаеться загружаеться страница, и сразу происходит замена картинки, без задержки!!!
;)

Спустя 2 минуты, 45 секунд (11.01.2012 - 16:18) redreem написал(а):

например как-то так (выдрал кусок из своего слайдера):


		function preloadPreSlider(f) {
			clearTimeout(preloadTimeout);
			for (var i=0;i<imgPrew.length;i++) if (imgPrew[i].offsetWidth<50) {
				preloadTimeout=setTimeout(function() {
					preloadPreSlider(f);
				},1000);
				return false;
			}
			f();
		}

ну и слайдер при этом вызывать не slide(...), а preloadPreSlider(slide(...))

Спустя 32 секунды (11.01.2012 - 16:19) kent666 написал(а):

идея заключаеться в том что у меня есть главный блок! Внутри него "движимый" блок в 2 раза больше основного
При загрузке в движимый блок 2-х изображений происходит задержка в 10с
Далее блок движимый блок смещается (а он у нас в 2 раза длинее основного) на половину и мы уже видим второй рисунок
Далее мы обновляем движимый блок и делаем все с начала

Спустя 7 секунд (11.01.2012 - 16:19) bodja написал(а):

Яка невдача :lol:

setTimeout(go, 10000);

       function go() {
            left++;
            if(left > 2){
	          timer = setTimeout(go, 25);//вызываем через каждые 25мс пока не достигнем нужного значения left
                        move_div.style.left=left;
            }
        }

Спустя 59 секунд (11.01.2012 - 16:20) redreem написал(а):

ну в любом случае 10 секунд - это не объективный параметр. а вдруг картинка будет 20 секунд загружаться? надо не задержку делать, а четкий контроль загрузки.

Спустя 8 минут, 20 секунд (11.01.2012 - 16:28) bodja написал(а):

Цитата

а вдруг картинка будет 20 секунд загружаться

Ну раз такая пьянка.

<body onLoad="slider_start()">
<img onLoad="img_start()">

Спустя 3 минуты, 2 секунды (11.01.2012 - 16:31) kent666 написал(а):

я в нете вообще нашел такое

	setTimeout(function() { alert('0.5 секунды') }, 500)

Если заменить alert('0.5 секунды') } пустой функцией то все равно ничего не получается

Спустя 2 минуты, 28 секунд (11.01.2012 - 16:34) kent666 написал(а):

вообще прочитал в описании функции
Этот метод выполняет код(или функцию), указанный в первом аргументе, асинхронно
Т.е. Задержку скрипта на ней не получить что ли?

Спустя 3 минуты, 35 секунд (11.01.2012 - 16:37) redreem написал(а):

нет. задержку надо делать по сетинтервалу. т.е. функция в сетинтервале должна смотреть - наступило ли некое событие. если наступило - делать одно, ненаступило - делать другое.

Спустя 24 минуты, 49 секунд (11.01.2012 - 17:02) bodja написал(а):

сетинтервал вызывает постоянно функцию ,пока не остановите
сеттаймаут вызывает однократно ,вот и вся разница.

То что вы здесь написали

Цитата

setTimeout(function() { alert('0.5 секунды') }, 500)

вы создали в аргументе анонимную функцию (без названия,есть такая фича у яваскрипта) с кодом
alert('0.5 секунды') ,и потом к ней обратились через пол-секунды.

Спустя 15 минут, 9 секунд (11.01.2012 - 17:17) kent666 написал(а):

Не работает хоть убей!!!

       function frame() { // функция для отрисовки
            left++;
            move_div.style.left = -left*removal + 'px';
            if (left*removal >= 490) {
	           clearInterval(timer); // завершить анимацию
            }
        }
        
        function pause() {
            left++;
            if (left >= 500) {
	           clearInterval(timer); // завершить анимацию
            }
        }
        
       timer = setInterval(pause, timePerFrame);
        left = 0;
        timer = setInterval(frame, timePerFrame);

Спустя 4 минуты, 2 секунды (11.01.2012 - 17:21) bodja написал(а):

приведите весь код ,и верстку тоже.

Спустя 4 минуты, 53 секунды (11.01.2012 - 17:26) kent666 написал(а):

function slide(obj)
{
    var main_div = document.getElementById('slide');
    var move_div;
    var img1;
    var img2;
    var img          = eval(obj);
    var removal      = 10;
    var timePerFrame = 10;
    var left = 0;
    var timer;
    
    if(img.length > 0){
        move_div = document.createElement("div");
        move_div.className = 'image_slide';
        
        img1 = document.createElement("div")
        img2 = document.createElement("div")
        img1.className = 'img';
        img2.className = 'img';
        img1.innerHTML = img['0'];
        img2.innerHTML = img['1'];   
        
        main_div.appendChild(move_div);
        move_div.appendChild(img1);
        move_div.appendChild(img2);
        
        function frame() { // функция для отрисовки
            left++;
            move_div.style.left = -left*removal + 'px';
            if (left*removal >= 490) {
	           clearInterval(timer); // завершить анимацию
            }
        }
        
        function pause() {
            left++;
            if (left >= 500) {
	           clearInterval(timer); // завершить анимацию
            }
        }
                
        function reset() {
            img1.innerHTML = img['1'];
            img2.innerHTML = img['2'];
            move_div.style.left = 0 + 'px';
        }
        
        timer = setInterval(pause, timePerFrame);
        left = 0;
        timer = setInterval(frame, timePerFrame);
        
    }    
}

        <!-- Content -->
		<div class="WC">
			<h1><?php echo $meta['title']; ?></h1>
			<div class="channelUp">
                <div id="slide" class="left_image" >

                </div>
				<div class="right"><?php echo $information['text']; ?></div>
				<div class="Stabil"></div>
			</div>
			<div class="Stabil"></div>
            <!-- Lift Cells -->
            <?php echo $units; ?>
			<!-- / Lift Cells -->
			<div class="Stabil"></div>
			<br/>
		</div>
        <script src="<?php echo SVV_HOST .'skins/js/slide.js'; ?>"></script>
        <script type="text/javascript">slide(<?php echo $images_json; ?>);</script>
		<!-- / Content -->

Спустя 26 минут, 57 секунд (11.01.2012 - 17:53) bodja написал(а):

Где у вас 'image_slide' и приведите class="left_image" и так же ,что у вас выплюноло в хтмл без пхп
И что у вас находится в obj

Спустя 5 минут, 24 секунды (11.01.2012 - 17:59) kent666 написал(а):

$images_json - это декодированный объект в пхп json

Я наверное все таки не правильно начал делать

function slide(obj)
{
    var main_div = document.getElementById('slide');
    var move_div;
    var img1;
    var img2;
    var img          = eval(obj);
    var removal      = 10;
    var timePerFrame = 20;
    var left = 500;
    var timer;
    
    if(img.length > 0){
        move_div = document.createElement("div");
        move_div.className = 'image_slide';
        
        img1 = document.createElement("div")
        img2 = document.createElement("div")
        img1.className = 'img';
        img2.className = 'img';
        img1.innerHTML = img['0'];
        img2.innerHTML = img['1'];   
        
        main_div.appendChild(move_div);
        move_div.appendChild(img1);
        move_div.appendChild(img2);
        
        function frame() { // функция для отрисовки
            if(left > 0){
                left--;                
            }
            else{                
                move_div.style.left = left*removal + 'px';
                if (left*removal <= -490) {
	               clearInterval(timer); // завершить анимацию
                }
                left--; 
            }


        }        
                    
        timer = setInterval(frame, timePerFrame);        
    }    
}

Работате с задержкой в 10с. Но функция setInterval работает асинхронно!!!
Поэтому у меня и не получались задержки!!!
Если я запускаю после timer = setInterval(frame, timePerFrame);
второй, то он не дожидаясь окончания работы первой функции делает вторую!!!
А это зна :blink: чит что надо пользоваться только одним setInterval
:blink:

Спустя 1 минута, 29 секунд (11.01.2012 - 18:00) kent666 написал(а):

["<img src=\"http:\/\/192.168.7.55\/setup\/images\/1326197336.jpg\" title=\"\u041f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" border=\"0\" width=\"490\">","<img src=\"http:\/\/192.168.7.55\/setup\/images\/1326197352.jpg\" title=\"\u0412\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" border=\"0\" width=\"490\">","<img src=\"http:\/\/192.168.7.55\/setup\/images\/1326197385.jpg\" title=\"\u0422\u0440\u0435\u0442\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" border=\"0\" width=\"490\">"]

объект!!!

Спустя 7 минут, 13 секунд (11.01.2012 - 18:07) bodja написал(а):

Все таймера ратотают асинхронно,
я же вам не случайно подсовывал таймаут.

И примерчик со сдвигом в 10сек.

Цитата

объект!!!

чето вы здесь перемутили

Цитата

img1 = document.createElement("div")
img2 = document.createElement("div")
img1.className = 'img';
img2.className = 'img';
img1.innerHTML = img['0'];
img2.innerHTML = img['1'];

slider.innerHTML='<div class="img" ><img src="'+arr[1]+'"></div>'

Спустя 5 минут, 15 секунд (11.01.2012 - 18:13) kent666 написал(а):

Вариантов нет!!! Рсунки разные по высоте!!! (пропорция не та. Если делать их одинаковыми по длине, то высота не совпадает а сжимать не хочеться)
вот и пришлось садить каждый рисунок в отдельный блок!!!
Я еще завтра наверное переделаю все с нуля!
bodja с меня еще +1 в карму завтра

(2 раза в день нельзя ставить)

Спустя 17 часов, 45 минут, 42 секунды (12.01.2012 - 11:58) kent666 написал(а):

Все получилось!!! Вот функция

function slide(obj)
{
    var main_div = document.getElementById('slide');
    var move_div;
    var img1;
    var img2;
    var img          = eval(obj);
    var dim = img.length
    var i=0; 
    var removal      = 20;
    var timePerFrame = 10;
    var left = 500;
    var leftNew = 500;
    var timer;

    function frame() { // функция для отрисовки
        if(left == leftNew) {
            img1.innerHTML = img[i];
            if(i == (dim-1)){
                i=0;
            }else{
                i++;
            }
            img2.innerHTML = img[i];
            move_div.style.left = 0 + 'px';
            left--;
        }else if(left > 0){
            left--;            
        }else if((left*removal) >= -490){
            move_div.style.left = left*removal + 'px'; 
            left--;
        }else{
            left = leftNew;          
        }
    }
  
    if(dim > 1){
        move_div = document.createElement("div");
        move_div.className = 'image_slide';        
        img1 = document.createElement("div")
        img2 = document.createElement("div")
        img1.className = 'img';
        img2.className = 'img';         
        main_div.appendChild(move_div);
        move_div.appendChild(img1);
        move_div.appendChild(img2);                    
        timer = setInterval(frame, timePerFrame);        
    }else if(dim == 1){
        move_div = document.createElement("div");
        move_div.className = 'image_slide';
        main_div.appendChild(move_div);
        move_div.innerHTML = img['0'];
    }else{        
    } 
}

Спустя 45 минут, 11 секунд (12.01.2012 - 12:43) redreem написал(а):

че-то не вижу clearInterval. типа frame крутит постоянно?

Спустя 18 минут, 43 секунды (12.01.2012 - 13:02) kent666 написал(а):

redreem Да
в каталоге постоянно идет смена изображений! вообщем все повторяется по кругу

Код конечно написан некрасиво, но мне сейчас нужен результат!!
В дальнейшем я его немного усовершенствую и может сделаю в виде класса.
Но пока все останется так как есть

Быстрый ответ:

Здесь расположена полная версия этой страницы.