Меняющиеся картинки
Здравствуйте
Подскажите пожалуйста как сделать чтобы при нажатие на кнопку, картинка менялась на следующею? И как только дойдешь до последний картинки, все начиналось заново. Заранее спасибо. |
function toggleImage( a ) { var images = [ '1.png', '2.png', '3.png' ]; a.src = images[ images.indexOf( a.src ) + 1 ]; } toggleImage( this ); |
Спасибо!!
|
Вот только почему как-бы есть 4 картинка которая не показывает?
Как исправить? |
function toggleImage( a ) { var images = [ '1.png', '2.png', '3.png' ]; a.src = images[ images.indexOf( a.src ) == images.length ? 0 : images.indexOf( a.src ) + 1 ]; } |
также...
Можно исправить? |
exec,
indexOf не работает для массивов в Internet Explorer, в других браузерах indexOf возвращает индекс (если найдено или -1) индекс не может равнятся длине массива - максмимум длина массива минус один Цитата:
var images = ["1.png", "2.png", "3.png"]; function toggleImage(a) { images.push(images.shift()); a.src = images[0] }; |
Спасибо огромное! Все работает!
|
А можно ли сделать чтобы они назад шли, предыдущие показывали?
|
function nextImage( a ){ if( ! nextImage.images ){ nextImage.images = [...]; nextImage.i = 0; } nextImage.i = (nextImage.i+1) % nextImage.images.length; a.src = nextImage.images[nextImage.i]; } |
Цитата:
|
Цитата:
|
может конечно есть варианты и поинтереснее )))
function nextImage(a) { if (!nextImage.images) { nextImage.images = ["1.png", "2.png", "3.png", "4.png"]; if (nextImage.images.length > 2) nextImage.images = nextImage.images.concat(nextImage.images.slice(1, nextImage.images.length - 1).reverse()); nextImage.i = 0 } nextImage.i = (nextImage.i + 1) % nextImage.images.length; a.src = nextImage.images[nextImage.i] }; |
ну я бы тогда как-то так сделал, например, с помощью mootools
var Images = new Class({ Implements: Options, initialize: function( options ){ this.setOptions(options); var self = this; this.options['prev-link'].addEvent('click', function(){ return self.prev.call(self); }); this.options['next-link'].addEvent('click', function(){ return self.next.call(self); }); }, next: function(){ this._i = (this._i + 1) % this.options['images'].length; this.options['img'].src = this.options['images'][this._i]; }, prev: function(){ this._i--; if( this._i < 0 ) this._i = this.options['images'].length-1; this.options['img'].src = this.options['images'][this._i]; } }); причем, если немного порефакторить, можно написать так initialize: function( options ){ ... this.options['prev-link'].addEvent('click', this.prev.of(this)); this.options['next-link'].addEvent('click', this.next.of(this)); }, а у тебя рони как-то и мутно получилось, и не то, что хотел ТС (ну или я его неправильно понял) Цитата:
|
x-yuri,
скрипт показывает бесконечную цепочку при 2 картинках 2,1,2,1,2 при 3 картинках 2,3,2,1,2,3,2,1,2,3 при 4 картинках 2.3,4,3,2,1,2,3,4,3,2,1,2 и т.д картинка номер 1 уже стоит изначально -- в задании было "А можно ли сделать чтобы они назад шли, предыдущие показывали?" то есть сначала картинки показываются вперёд потом назад -- всё логично? или как? а скрипт поясню что делает берёт содержимое между крайними элементами массива - меняет порядок и добавляет в массив получеться замкнутая цепочка было 1,2.3,4,5 взяли 2,3,4 изменили порядок стало 4,3,2 добавили в масив получилось 1,2.3,4,5,4,3,2 считываем элементы массива по порядку - получаем 1,2.3,4,5,4,3,2 1,2.3,4,5,4,3,2 1,2.3,4,5,4,3,2 фото показываются от 1 до 5 потом от 5 до 1 незнаю стали ли понятнее от моего обьяснения ))) |
Цитата:
|
Цитата:
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 16:30. |