Активация элементов DOM из состояния "display: none"
 

Всем доброго времени суток.
Есть вот такая функция:

$('#btnChFrame').click(changeFrame);

    function changeFrame() {
        var randomFrame = getRandom(6);
        $('#img').attr('src', 'images/frames/' + randomFrame + '.png');
    }

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

Меня хватило только на этот рандомный вывод.

Сейчас подумал, что можно сделать в CSS "display: none" для тех шести картинок и разблокировать их по очереди той же функцией "click". Вопрос в том, как это правильно сделать.
Буду благодарен за любой совет.

P.S.: Может быть есть вариант по-проще или без добавления всех картинок в DOM?

$('#btnChFrame').click(changeFrame);
var i = 0;
    function changeFrame() {
        $('#img').attr('src', 'images/frames/' + i + '.png');
        i = ++i<=6?i:0;
    }

так?

drakulawz,

$('#btnChFrame').click(changeFrame);
  var randomFrame = 0;
    function changeFrame() {
        randomFrame = ++randomFrame % 6;
        $('#img').attr('src', 'images/frames/' + randomFrame + '.png');
    }

Работает, только ставлю 5 вместо 6 так как откуда-то появляется седьмая (несуществующая) картинка. А если ставлю вместо ++i i++ то вообще 8 картинок делает, можете объяснить почему так?

Ваш код работает отлично. Вот только если я первую функцию, хоть немного, понимаю, то вашу совсем нет. Можете объяснить, что к чему? А именно, разве "%" не выводит целое дробного числа?

З.Ы.: А я вообще в такие дебри (опять) лез:

var frames = $('#img');
        function changeFrame(frames) {
            var index = 0;
            if (index < frames.length) {
                index++;
            } else if (index == frames.length) {
                index = 0;
            } else {}
            return (frames[index]);
        }

drakulawz,

i = ++i<6?i:0;

равно в таком случае стареть надо было

drakulawz,

<script>
 var randomFrame = 0;
 for (var i = 0; i < 50; i++) {
    randomFrame = ++randomFrame % 6;
    document.write(randomFrame+"<br>")
 }
</script>

рони,
Это уже лишнее, мне цикл не нужен. Есть кнопка на клик по которой должна меняться рамка. Первый вариант отлично подошёл...

Всем спасибо за помощь!

это была демонстрация того, что делает код ++ %