Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Меняющиеся картинки (https://javascript.ru/forum/misc/10855-menyayushhiesya-kartinki.html)

ber104 24.07.2010 18:44

Меняющиеся картинки
 
Здравствуйте
Подскажите пожалуйста как сделать чтобы при нажатие на кнопку, картинка менялась на следующею? И как только дойдешь до последний картинки, все начиналось заново.
Заранее спасибо.

exec 24.07.2010 19:08

function toggleImage( a ) {
	var images = [ '1.png', '2.png', '3.png' ];
	a.src = images[ images.indexOf( a.src ) + 1 ];
}


toggleImage( this );

ber104 24.07.2010 19:28

Спасибо!!

ber104 24.07.2010 19:36

Вот только почему как-бы есть 4 картинка которая не показывает?
Как исправить?

exec 24.07.2010 19:54

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 ];
}

ber104 24.07.2010 20:54

также...
Можно исправить?

рони 25.07.2010 06:13

exec,
indexOf не работает для массивов в Internet Explorer, в других браузерах indexOf возвращает индекс (если найдено или -1) индекс не может равнятся длине массива - максмимум длина массива минус один
Цитата:

Сообщение от exec
images.indexOf( a.src ) == images.length

как вариант можно так
var images = ["1.png", "2.png", "3.png"];

function toggleImage(a) {
    images.push(images.shift());
    a.src = images[0]
};

ber104 25.07.2010 08:52

Спасибо огромное! Все работает!

ber104 25.07.2010 09:04

А можно ли сделать чтобы они назад шли, предыдущие показывали?

x-yuri 25.07.2010 09:08

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];
}

x-yuri 25.07.2010 09:09

Цитата:

Сообщение от ber104
А можно ли сделать чтобы они назад шли, предыдущие показывали?

а сам что-нибудь сделать не хочешь?

ber104 25.07.2010 09:47

Цитата:

Сообщение от x-yuri (Сообщение 65063)
а сам что-нибудь сделать не хочешь?

Если бы я знал как...:-?

рони 26.07.2010 00:37

может конечно есть варианты и поинтереснее )))
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]
};

x-yuri 27.07.2010 20:32

ну я бы тогда как-то так сделал, например, с помощью 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));
},

а у тебя рони как-то и мутно получилось, и не то, что хотел ТС (ну или я его неправильно понял)

Цитата:

Сообщение от ber104
Если бы я знал как...

с таким подходом и не узнаешь ;)

рони 28.07.2010 00:29

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
незнаю стали ли понятнее от моего обьяснения )))

x-yuri 28.07.2010 01:35

Цитата:

Сообщение от рони
незнаю стали ли понятнее от моего обьяснения )))

вот я именно об этом, и пользовательский интерфейс, и реализация, и объяснение немного нестадартны/неочевидны/могли бы быть проще. Я твое решение понял, просто я исходил из того, что задача - не теоретического плана и ТС не однозначно сформулировал, что ему нужно. Какой смысл выдавать пользователю картинки в твоем порядке? Кроме того, раз у нас есть состояние, а функций уже две, я создал класс

рони 28.07.2010 02:33

Цитата:

Сообщение от x-yuri
Какой смысл выдавать пользователю картинки в твоем порядке?

Цитата:

Сообщение от ber104
Подскажите пожалуйста как сделать чтобы при нажатие на кнопку, картинка менялась на следующею? И как только дойдешь до последний картинки, все начиналось заново.

Цитата:

Сообщение от ber104
А можно ли сделать чтобы они назад шли, предыдущие показывали?

так что порядок показа от 1 к последней и от последней к первой не я придумал )))


Часовой пояс GMT +3, время: 16:30.