Как сделать кнопки назад и вперед для изображений и / или видео в JavaScript?

0

Я пытаюсь сделать назад и следующие кнопки, в данном случае, iframe. Вот мой код:

<script>
    var array=["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    var iframe = document.getElementById('frame');
    var previousRandom = "npvNPORFXpc"; // initial video
    document.getElementById('random').addEventListener('click', function () {
        do {
            var random = array[Math.floor(Math.random() * array.length)];
        } 
        while (previousRandom === random)
        var url="http://www.youtube.com/embed/"+random;
        previousRandom = random;
        iframe.src = url;
    });
</script>

С небольшим количеством HTML:

<button id="random">Random</button><br>
<iframe id="frame" src="http://www.youtube.com/embed/npvNPORFXpc" width="640" height="360" frameborder="0" allowfullscreen></iframe>

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

Я только начал с JS и не смог найти пример, который я понял.
Должен был начать с основ JS вместо этого проекта, но все равно хотел бы закончить это!

http://jsfiddle.net/MPNU2/

  • 0
    Это может быть полезно stackoverflow.com/questions/22089936/…
  • 0
    Вам нужно будет сохранить текущий индекс массива - тогда, когда вы нажимаете следующий или предыдущий, вы увеличиваете или уменьшаете индекс. Вы также должны проверить, есть ли следующее или предыдущее видео
Показать ещё 4 комментария
Теги:
button
iframe

2 ответа

1

Пример, используя пример, на который я указал вам.

CSS

#utubeFrame {
    display:block;
    width:640px;
    height:360px;
}

HTML

<button id="random">Random</button>
<button id="previous">Previous</button>
<button id="next">Next</button>
<iframe id="utubeFrame"></iframe>

Javascript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        return this;
    },

    setToStart: function () {
        return this.setPosition(0);
    },

    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },

    currentElement: function () {
        return this.array[this.position];
    },

    nextElement: function () {
        return this.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};

var utubeFrame = document.getElementById('utubeFrame'),
    utubeIds = ["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"],
    baseURL = 'http://www.youtube.com/embed/',
    utubeRing = new RingArray(utubeIds);

function update() {
    utubeFrame.src = baseURL + utubeRing.currentElement();
}

document.getElementById('random').addEventListener('click', function () {
    var currentElement = utubeRing.currentElement();

    do {
        utubeRing.setRandom();
    } while (utubeRing.currentElement() === currentElement);
    update();
});

document.getElementById("previous").addEventListener("click", function () {
    utubeRing.increment(-1);
    update();
}, false);

document.getElementById("next").addEventListener("click", function () {
    utubeRing.increment(1);
    update();
}, false);

update();

На jsFiddle

Поделиться
  • 0
    Спасибо, это помогает, а! Я вижу, что в этом случае видео уже в JS. Выглядит немного сложнее на данный момент. Я удалил HTML из рамки и стилизовал его в CSS! :). Я сравню ваш скрипт с другими приведенными примерами, чтобы увидеть, чем он отличается. но сначала мне действительно нужно узнать немного больше о JS. Еще раз спасибо!
0

HTML:

<button id="random">Random</button>
&nbsp;
&nbsp;
<button id="prevVideo">Prev</button>
<button id="nextVideo">Next</button><br>

<iframe id="frame" src="http://www.youtube.com/embed/npvNPORFXpc" width="640"      height="360" frameborder="0" allowfullscreen></iframe>

JS:

var array=["npvNPORFXpc", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
var iframe = document.getElementById('frame');
var previousRandom = "npvNPORFXpc"; // initial video
document.getElementById('random').addEventListener('click', function () {
do {
    var random = array[Math.floor(Math.random() * array.length)];
} while (previousRandom === random)
var url="http://www.youtube.com/embed/"+random;
previousRandom = random;
iframe.src = url;});

document.getElementById('prevVideo').addEventListener('click', function () {
    var curIndex = array.indexOf(previousRandom);
    curIndex--;
    if (curIndex < 0)
    {
        curIndex = array.length -1;
    }
    var video = array[curIndex];
    var url="http://www.youtube.com/embed/"+video;
    previousRandom = video;
    iframe.src = url;
});

document.getElementById('nextVideo').addEventListener('click', function () {
    var curIndex = array.indexOf(previousRandom);
    curIndex++;
    if (curIndex >= array.length)
    {
        curIndex = 0;
    }
    var video = array[curIndex];
    var url="http://www.youtube.com/embed/"+video;
    previousRandom = video;
    iframe.src = url;
});

Рабочий пример: http://jsfiddle.net/z47XP/

Поделиться
  • 0
    Спасибо, это именно то, что я имею в виду! Хотели бы вы объяснить немного больше о том, что происходит? (Копирование и вставка действительно многому учат, но ..: p).
  • 0
    Когда нажата кнопка «nextVideo», прежде всего вы должны найти индекс текущего видео: var curIndex = array.indexOf(previousRandom); (первое видео-> индекс = 0, второе видео-> индекс = 1 и т. д.) Затем вы можете рассчитать следующий индекс видео: curIndex++; Поскольку количество видео ограничено (в вашем случае 5), вы должны быть уверены, что не загружаете 6-е видео :-) if (curIndex >= array.length) { curIndex = 0; } И, наконец, вы можете преобразовать индекс видео в URL: var video = array[curIndex]; var url="http://www.youtube.com/embed/"+video; previousRandom = video; iframe.src = url
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню