Связка switch-case и массива
Доброго всем времени суток!
Ломаю голову над таким вопросом: Вот html код: <div id="galeryMoto"> <img src="images/gal/1.jpg" /> </div> <input type="submit" id="prev" value="Назад" /> <input type="submit" id="next" value="Вперёд" /> Вот JQuery: $('#next').click(function(){ switch ($('#galeryMoto img').attr('src')){ case 'images/gal/1.jpg': nova ( 'images/gal/2.jpg', 'url(images/gal/2.jpg)', 'explode'); break; case 'images/gal/2.jpg': nova ('images/gal/3.jpg', 'url(images/gal/3.jpg)', 'drop'); break; case 'images/gal/3.jpg': nova ( 'images/gal/4.jpg', 'url(images/gal/4.jpg)', 'explode'); break; case 'images/gal/4.jpg': nova ('images/gal/1.jpg', 'url(images/gal/1.jpg)', 'drop'); break; } }) function nova (images, background, effect) { $('#galeryMoto').css({'background-image':background}); $('#galeryMoto img').hide(effect, 1000).attr('src', images).show(1); } Всё хорошо работает, но что если я захочу расширить галерею до 20 изображений? Тогда придётся добавлять кучу операторов case! Я вот что думаю: Сделать три массива, в первом будут атрибуты src для картинок, во втором бэкграунды, в третьем эффекты. После создать функцию в кейсе, которая будет получать данные из массива, сравнивать с текущим значением атрибута src и в качестве параметра передавать в функцию nova следующий элемент массива. Что-то вроде того: var ArrayForImg = [/*Элементы массива*/]; var CountArrayForImg = for (var i = 0, i < ArrayForImg.length, i++){ return (ArrayForImg[i]); } Но мне абсолютно не ясно как полученный в цикле результат запихать в кейс!:blink: Как же тогда сравнивать со всеми элементами массива?:blink: Есть какие-нибудь идеи? Заранее большое всем спасибо! |
Алек, 3 месяца на форуме, тестовых примеров с возможностью запуска делать не научился? :-/
Цитата:
|
Цитата:
Можно ссылочку дать где про это говориться? Цитата:
Да чё-то у меня дико ни чё не получается, :( , я делаю всё по шагам, и вот такая проблема: Вот так работает, выводится хорошо, вполне можно передавать в параметр функции, только кавычки приплюсовать: var ArrayForImg = ['images/gal/2.jpg', 'url(images/gal/2.jpg)', 'explode']; for (var i = 0; i < ArrayForImg.length; i++){ document.write (ArrayForImg[i] + "<br />"); } А вот так выводится только последний элемент, не могу понять в чём дело: var ArrayForImg = ['images/gal/2.jpg', 'url(images/gal/2.jpg)', 'explode']; for (var i = 0; i < ArrayForImg.length; i++){ var ImgText = ArrayForImg[i]; } $('#forresults').text(ImgText); На мой взгляд всё вроде логично... |
Цитата:
собираешь весь код в один тестовый пример и заключаешь его в [html run] и усё вот тебе один из простых вариантов next var mas = ["image1", "image2", "image3"]; function next(eq) { var eq = mas.indexOf(eq); if (eq == -1) return mas[0]; if (mas[eq + 1] == undefined) return mas[eq]; return mas[eq + 1]; } alert(next("image1")); alert(next("image3")); alert(next("image4")); indexOf для массивов не для IE<9, можно сделать функцию-эмулятор, где в цикле идёт перебор со сравнением |
bes, спасибо!
indexOf прекрасный метод, весь код свёлся к 4 строчкам, а функционал увеличился! Вот как это теперь выглядит: var array = ['images/gal/1.jpg', 'images/gal/2.jpg', 'images/gal/3.jpg', 'images/gal/4.jpg',]; $('#next1').click(function(){ var itog = array.indexOf($('#galeryMoto1 img').attr('src')); $('#galeryMoto1 img').attr('src', (array[itog + 1])); }); Теперь, если я захочу добавить в галерею сколько угодно изображений, мне достаточно просто использовать метод array.push('images/gal/5.jpg'); Осталось только по этой схеме доработать эфекты. Ещё раз спасибо! |
Часовой пояс GMT +3, время: 08:11. |