Связка 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, время: 19:54. |