анимация в javascript

spring555 · October 19, 2011

Мне требовалось сделать анимацию из трёх изображений,как я поняла их надо просто крутить по циклу.

По мимо этого анимация должна работать когда нажму на кнопку старт,когда нажимаю на стоп останавливаться.

На javascript пишу буквально день,опыта никакого.

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<script>
var delay = 1000
var imageNum = 1
var d=document

// Предварительная загрузка изображений анимации
var theImages = new Array()
for(i = 1; i <=3; i++) {
   theImages[i] = new Image()
   theImages[i].src = "img" + i + ".jpg"
}

function animate() {

   d.animation.src = theImages[imageNum].src
   imageNum++
   if(imageNum >3) {
      imageNum = 1
   }



}

var idTimer=setTimeout('animate()', delay)//для остановки таймера
</SCRIPT>

<BODY BGCOLOR="white">

<IMG NAME="animation" SRC="img1.jpg" onload=" setTimeout('animate()', delay)" >
<FORM name="myform">
    <input type="button" name="start" value="старт"  />
  <INPUT TYPE="button" Value="stop" name="stop1"  onclick="clearTimeout(idTimer)" >
   <INPUT TYPE="button" Value="Faster" onClick="faster()">
</FORM>

</BODY>

</html>

Great Rash · October 19, 2011

Учите JS. Тут плохо всё. Да и HTML вам подучить надо, с ним тоже все ужасно.


var theImages = new Array() // старьё
var theImages = [] // так короче правда?

Элемент на странице надо искать не по имени, а по id. Ну и вообще много всего. Ну и <BODY BGCOLOR="white"> это просто :facepalmxd:

spring555 · October 19, 2011

я ведь и не скрываю что я начинающий,но что мне делать с программой?что не так?допустим поправки я внесла от этого программа лучше работать не стала.(((

Great Rash · October 19, 2011

Покажите поправки.

spring555 · October 19, 2011

Не поняла момент по поводу поиска по id,кнопка старт работает,конечно способ у меня не лучший,но работает.стоп по прежнему не правильно(

Не могу разобраться как написать условие "если кнопка стоп нажата",вот такая конструкция

if(d.myform.stop1.click){}

не работает,видимо не правильно применяю

<script>
var delay = 1000
var imageNum = 1
var d=document

// Предварительная загрузка изображений анимации
var theImages = []
for(i = 1; i <=3; i++) {
   theImages[i] = new Image()
   theImages[i].src = "img" + i + ".jpg"
}

function animate() {


   d.animation.src = theImages[imageNum].src
   imageNum++
   if(imageNum >3) {
      imageNum = 1
   }
   setTimeout('animate()', delay);



}
function stoped() {
	var id=setTimeout('animate', delay)
  clearTimeout(id)
}

</SCRIPT>

<BODY >

<IMG NAME="animation" SRC="img1.jpg"  >

<FORM name="myform">
    <input type="button" name="start" value="старт" onClick=" setTimeout('animate()', delay)" />
  <INPUT TYPE="button" Value="stop" name="stop1"  onClick="stoped()" / >
</FORM>
</BODY>

</html>

Edited October 19, 2011 by spring555

Great Rash · October 19, 2011

Не поняла момент по поводу поиска по id

Я не вижу чтобы вы искали элемент по id.

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

spring555 · October 19, 2011

как сделать чтобы кнопка stop работала?

Great Rash · October 19, 2011

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

spring555 · October 19, 2011

Просто как только я не вертела idTime чтобы выполнить функцию clearTimeout ничего путнего не вышло

а если я функцию не много изменю таким образом,

как условие if описать чтобы смысл был такой if(кнопку стоп нажали) то остановить

function animate() {

	var idTime=setTimeout('animate', delay)

	if(myform.stop1.onclick==false)
	{
	  alert('анимация приостоновлена')
	  clearTimeout(idTime)
	}

	else
	{
         d.animation.src = theImages[imageNum].src
   		 imageNum++
         if(imageNum >3) 
		   {
            imageNum = 1
           }
         setTimeout('animate()', delay);
	 }

}
кнопка старт переписана таким образом
<input type="button" name="start" value="старт" onClick=" animate()" />

Great Rash · October 19, 2011

Не надо действовать наобум. Надо взять книгу и прочитать для начала, что такое глобальные и локальные переменные. Потом еще раз прочитать, что я вам пишу.

spring555 · October 19, 2011

я вынесла переменную в глобальные

всё получилось,спасибо большое


function animate() {

	     var cmd="animate()"
         d.animation.src = theImages[imageNum].src
   		 imageNum++
         if(imageNum >3) 
		   {
            imageNum = 1
           }
         idTime=setTimeout('animate()', delay);

}

function stoped() {
   clearTimeout(idTime)
}

Sign In

анимация в javascript

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information