jQuery изображение src меняется каждые 8 ​​секунд

У меня есть div с идентификатором заголовка, что такое идентификатор, это первое изображение, найденное в этом идентификаторе, которое меняется каждые 8 ​​секунд. Имя изображения — image1.jpg, и через 8 секунд id изменяет изображение1 на изображение2, затем еще через 8 секунд возвращается к изображению1 и так далее.

Путь поиска первого изображения в div и т. Д. Немного затянут, и как мне поступить с остальным? Например, заставить src меняться каждые 8 ​​секунд? Помощь очень ценится


javascript image jquery src
person John    schedule 21.02.2013    source источник
comment
что ты уже испробовал? Получение первого элемента изображения — это просто $('#header img').first(). Что касается изменения изображения: stackoverflow.com/questions /10415932/.   -  person Felix Kling    schedule 21.02.2013
comment
mattgemmell.com/2008/12/08/what-have-you -пробовал   -  person s.lenders    schedule 21.02.2013
comment
чтобы получить src, вы можете сделать var src = $('#header').attr('src');, а затем изменить его по желанию, так что останется только функция тайм-аута, которая запускается каждые 8 ​​секунд, которая извлекает следующее изображение src, возможно, сохраняет все src в массиве или что-то в этом роде.   -  person martincarlin87    schedule 21.02.2013
comment
Вы хотите использовать слайдер?   -  person Sora    schedule 21.02.2013

Ответы (2)


arrow_upward
1
arrow_downward

Можешь попробовать

var $img = $('div#header img').first();
var flag = false;
setInterval(function(){
    $img.attr('src', 'image' + (flag ? 1 : 2) + '.jpeg' );
    flag = !flag;
}, 8000);

Функциональная демонстрация: Fiddle (Примечание: это не работает с изображением, это просто демонстрация используемой техники. Проверить консоль, чтобы увидеть значение src)

person Arun P Johny    schedule 21.02.2013
comment
Вы должны использовать setInterval, @John хочет, чтобы изображение src было изменено обратно - person Jefferson Henrique C. Soares; 21.02.2013
comment
@JeffersonHenriqueC.Soares Да, вы правы, внесу поправку - person Arun P Johny; 21.02.2013
comment
@JeffersonHenriqueC.Soares обновлен, чтобы поддержать возвращение - person Arun P Johny; 21.02.2013
comment
@ArunPJohny в этой идее было бы проще использовать логическое значение и сделать (flag)?1:2 и инвертировать то, что вы делаете flag = !flag, вместо того, чтобы делать другое, если - person Hugo Alves; 21.02.2013
comment
Пожалуйста, кто-нибудь может сказать, что здесь происходит? (флаг == 0 ? 1 : 2) - person EnterJQ; 21.02.2013
comment
@EnterJQ Я думаю, что эта строка неверна, она должна быть ((flag == 0)? 1:2) - person Hugo Alves; 21.02.2013
comment
@EnterJQ это то же самое, что и flag = if(flag ==0) 1 else 2, но читать его приятнее - person Hugo Alves; 21.02.2013
comment
@HugoAlves Да, вы правы, было бы проще использовать логический флаг. - person Arun P Johny; 21.02.2013
comment
@EnterJQ Это тернарный оператор en.wikipedia.org/wiki/%3F:#JavaScript / msdn.microsoft. com/en-us/library/ie/be21c7hw(v=vs.94).aspx - person Arun P Johny; 21.02.2013
comment
@ArunPJohny, если я позже добавлю третье изображение (будучи image3), я просто изменю флаг? 1 : 2 для флага? 1:2:3? В остальном это работает отлично. Спасибо! - person John; 21.02.2013
comment
@Джон Нет, так не пойдет. У меня есть обновленное решение по адресу jsfiddle.net/uxZfq/3. Здесь вы можете решить, где сбросить счетчик на основе желаемой итерации. - person Arun P Johny; 21.02.2013

arrow_upward
1
arrow_downward

предполагая, что первое изображение - image1.jpeg, тогда при первом запуске вы узнаете, что это будет 2, поэтому сначала используйте ++i для увеличения, а затем используйте var в строке

var i = 0;
setInterval(function() { 
     if(i == 2) i=0;

     $('#imageID').attr('src', 'image' + (++i) + '.jpeg' );
}, 8000);
person Hugo Alves    schedule 21.02.2013