Несколько элементов массива в одном слайд-шоу? - PullRequest
Новая
       2

Несколько элементов массива в одном слайд-шоу?

1 голос
/ 23 июня 2011

Я сделал простое слайд-шоу из изображений в массиве. Я ищу способ добавить элементы к каждому «слайду», в дополнение к изображению, но они относятся только к атрибутам изображения (title, alt, url и т. Д.). Есть ли способ создать классы (для элементов, отличных от изображений, таких как текст заголовка и абзац контента) в моем javascript, который можно добавить в массив каждого слайда (и стилизовать в css)?

Это мой текущий код: 

var infoData =[
    'images/image1.jpg',
    'images/image2.jpg',
    'images/image3.jpg',
    'images/image4.jpg',
    'images/image5.jpg',
];

var cnt = infoData.length;

$(function() {
    setInterval (Slider, 3000);
});

function Slider() {
    $('.infoFader').fadeOut('slow', function() {
        $(this).attr('src', infoData[(infoData.length++) % cnt]).fadeIn('slow');
    });
}

Прямо сейчас, данные извлекаются через тег изображения в моем HTML 

<img class="infoFader" src="" />

Я бы хотел, чтобы массив был примерно таким: 

{
    'category':"category title",
    'linkurl':"http://www.billiards.com",
    'image':"images/image1.jpg",
    'title':"These are people playing pool",
    'subtitle':"a little more information here",
    'more':[
        {'title':"How to play billiards",'url':"http://www.billiards.com"},
        {'title':"Best pool angles",'url':"http://www.poolangles.com"},
        {'title':"Local pool halls and how to avoid them",'url':"http://www.avoidpoolhalls.com"},
        {'title':"Pool hall of fame",'url':"http://www.halloffame.com"}
    ]
},

{
    'category':"category title",
    'linkurl':"http://www.playingtennis.com",
    'image':"images/image2.jpg",
    'title':"This little boy is playing tennis",
    'subtitle':"more info on tennis here",
    'more':[
        {'title':"associated link", 'url':"http://www.assoc.com"},
        {'title':"item of interest", 'url':"http://www.interesting.com"},
    ]
},

По сути, каждый слайд будет иметь несколько элементов, которые я могу стилизовать (положение, цвет и т. Д.) В зависимости от их класса, поэтому HTML будет ... 

<div class="infoFader"></div>

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

1 Ответ

1 голос
/ 23 июня 2011

Ты убиваешь себя здесь. Поскольку вы уже используете jQuery, используйте что-то вроде jQuery.Cycle . Вы указываете контейнер, и он циклически обрабатывает каждый дочерний элемент первого уровня. Эти дети могут содержать все, что вы хотите; Цикл не волнует.

...