Обмен изображениями с использованием jQuery - PullRequest
Новая
       34

Обмен изображениями с использованием jQuery

0 голосов
/ 29 августа 2011

Я надеюсь, что кто-нибудь может помочь мне с этим. Я работаю над сайтом портфолио, который в настоящее время выглядит следующим образом:

http://cargocollective.com/shap

Как видите, у меня есть изображение в формате png, содержащее более 15 анимированных изображений в формате gif.

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

Я надеюсь, что кто-то может понять, что я имею в виду и помочь мне.

__ _ __ _ __ _ _ * ОБНОВЛЕНИЕ *:

Большое спасибо, я очень ценю помощь. Прошу прощения за недостаток знаний, который у меня есть, из-за чего мне трудно использовать то, что вы только что написали там, но это то, что я добавил в свой исходный код: 

<script type="text/javascript">
$(document).ready(function() { changer(); });

function changer() {
  var imgnum = Math.floor(15*Math.random());
  var time = Math.floor(5000*Math.random());
  var $img = $("img").eq(imgnum);

  if ($img.attr("src")=="http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif")
    $img.attr("src","http://payload.cargocollective.com/1/1/39798/479849/prt_166x132_1314132538.gif");
  else
    $img.attr("src","http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif");
  setTimeout(changer,time);
}
</script>

Я просто скопировал URL-адрес 2 моих миниатюрных картинок в формате gif и добавил их в скрипт, это абсолютно неправильно? Может быть, тот факт, что я использую каргоколлективную систему, усложняет ситуацию. Вот как это выглядит сейчас, как вы можете видеть, что-то происходит, но я не могу это контролировать:

http://cargocollective.com/shap

(через минуту png-оверлей по какой-либо причине исчезает)

лучше, s

1 Ответ

1 голос
/ 29 августа 2011

Трубные телевизоры! Как чудесно странно. ; -)

Ну, вот кое-что, что я бросил вместе. Очевидно, что вы должны изменить реальные SRC-изображения на то, что существует на вашем сервере.

http://jsfiddle.net/9KrsV/1/

$(function() { changer(); });

function changer() {
  var imgnum = Math.floor(15*Math.random());
  var time = Math.floor(5000*Math.random());
  var $img = $("img").eq(imgnum);

  if ($img.attr("src")=="images/chalk-dotted.png")
    $img.attr("src","images/chalk-box.png");
  else
    $img.attr("src","images/chalk-dotted.png");
  setTimeout(changer,time);
}

ОБНОВЛЕНИЕ: Очевидно, это довольно узко. Вот еще один скрипт, который будет хранить старый SRC и в конечном итоге вернуться к нему: 

function changer() {
    var imgnum = Math.floor(15 * Math.random());
    var time = Math.floor(5000 * Math.random());
    var $img = $("img").eq(imgnum);
    var newsrc = "noisy_static.gif";

    if ($img.attr("src") == newsrc) {
        $img.attr("src", $img.data("oldsrc"));
    } else {
        $img.data("oldsrc",$img.attr("src"));
        $img.attr("src", newsrc);
    }
    setTimeout(changer, time);
}
...