Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > выборочная анимация

Автор: minimalist 18.9.2010, 20:33

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> Задание 28 </title>
  <script type="text/javascript">
  var num=0;
    var imgs = new Array();
    for (var i = 1; i < 4; i=i+1) imgs.push(new Image());
    imgs[0].src = "фотки/pic1.jpg";
    imgs[1].src = "фотки/pic2.jpg";
    imgs[2].src = "фотки/pic3.jpg";
function shownext() {
        num = (num >= imgs.length - 1) ? 0 : num + 1;
        document.getElementById("mypic").src = imgs[num].src;
    }
  function startshow(sp)
  {
  howfast=1600
  if (sp.toUpperCase() == "SLOW")
  {howfast=2400}
  if (sp.toUpperCase() == "FAST")
  {howfast=800}
  alert(howfast)
     setInterval(shownext,howfast);
  }
  </script>
</head>
<body>
  <center>
  <form name="myform">
  <img src="фотки/pic1.jpg" id="mypic" width="600" height="374" border="0">
  <p>Задайте скорость анимации: (fast, medium, slow) <input type="text" value="medium" name="speed">
  <p><a href="#" onclick="startshow(document.myform.speed.value)">Показать анимацию</a>
  </center>
</body>
</html>

есть вариант более правильного кода????
Этот как-то не правильно работает

Автор: Amphiluke 18.9.2010, 20:54

Вы намеренно не закрываете теги (p, form)? smile

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Задание 28 </title>
  <script type="text/javascript">
  var num=0;
    var imgs = new Array();
    for (var i = 1; i < 4; i=i+1) imgs.push(new Image());
    imgs[0].src = "фотки/pic1.jpg";
    imgs[1].src = "фотки/pic2.jpg";
    imgs[2].src = "фотки/pic3.jpg";
function shownext() {
        num = (num >= imgs.length - 1) ? 0 : num + 1;
        document.getElementById("mypic").src = imgs[num].src;
    }
    var t = null;
  function startshow(sp)
  {
  howfast=1600
  if (sp.toUpperCase() == "SLOW")
  {howfast=2400}
  if (sp.toUpperCase() == "FAST")
  {howfast=800}
  alert(howfast)
  if (t) clearInterval(t);
     t = setInterval(shownext,howfast);
  }
  </script>
 </head>
 <body>
  <center>
  <form name="myform" action="#">
  <img src="фотки/pic1.jpg" id="mypic" width="600" height="374" border="0">
  <p>Задайте скорость анимации: (fast, medium, slow) <input type="text" value="medium" name="speed"></p>
  <p><a href="#" onclick="startshow(document.myform.speed.value)">Показать анимацию</a></p>
  </form>
  </center>
 </body>
</html>

Автор: minimalist 18.9.2010, 21:09

ну <p> не обязательно....а вот за все остальное спасибо!!!!!!!! smile

Автор: magelan 18.9.2010, 21:45

не в упрек, а красоты ради...

Код


var num=0, imgs = [];
for ( var i = 1; i < 4; i++ )
   imgs.push( new Image());
for ( var i = 0; i < 3; i++ )
    imgs[ i ].src = "фотки/pic"+ ( i + 1 ) + ".jpg";

Автор: Amphiluke 19.9.2010, 08:10

Цитата(magelan @ 19.9.2010, 01:45

)

не в упрек, а красоты ради...

Дак зачем же два цикла подряд в таком случае? Это неэффективно…

Код


for (var i = 0; i < 3; i++) {
    imgs.push(new Image());
    imgs[i].src = "фотки/pic" + (i+1).toString() + ".jpg";
}

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

Добавлено через 6 минут и 51 секунду
Кстати, если вспомнить, что метод push возвращает новую длину массива, можно записать цикл предзагрузки и так:

Код


for (var i = 0; i < 3; i++) {
    imgs[imgs.push(new Image()) - 1].src = "фотки/pic" + (i+1).toString() + ".jpg";
}

Автор: minimalist 19.9.2010, 12:18

Код


for (var i = 0; i < 3; i++) {
    imgs[imgs.push(new Image()) - 1].src = "фотки/pic" + (i+1).toString() + ".jpg";
}

Amphiluke вы не могли бы объяснить действие кода в imgs[imgs.push(new Image()) - 1]????!!!!!!!!! smile

Автор: Amphiluke 19.9.2010, 12:28

Эээ. А что конкретно не ясно? Я уже написал выше: метод push объекта Array добавляет в конец массива новый элемент и возвращает новую длину массива с учетом добавленного элемента. Поэтому в квадратных скобках после этого получается: imgs[новая_длина - 1]. Это и есть обращение к последнему добавленному элементу (new Image()). Поэтому можно сразу получить доступ к его атрибуту src. Вот и получается запись

Код


imgs[imgs.push(new Image()) - 1].src = ...

Добавлено через 6 минут и 29 секунд
P.S. Этим, конечно, не стоит злоупотреблять. Код должен оставаться читабельным, поэтому краткость не должна быть в ущерб ясности кода.

Автор: minimalist 19.9.2010, 12:45

тогда почему -1.....а не +1....по моей логике...если добавляет новый элемент в массив..и соответственно новая длина массива...то +
или я чего-то не понимаю????

Автор: Amphiluke 19.9.2010, 12:49

Массив индексируется с нуля. Поэтому последний элемент всегда имеет индекс, на единицу меньший, чем длина массива.

Добавлено через 1 минуту и 41 секунду
Это во-первых.

А во-вторых, метод push возвращает длину уже с учетом добавленного элемента.

Автор: minimalist 19.9.2010, 12:52