Доброго всем времени суток!
Ломаю голову над таким вопросом:
Вот 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]);
}
Но мне абсолютно не ясно как полученный в цикле результат запихать в кейс!
Как же тогда сравнивать со всеми элементами массива?
Есть какие-нибудь идеи?
Заранее большое всем спасибо!