Multiple array elements in single slideshow slide?

I've made a simple slideshow from images in an array. I've search for a way to add elements to each "slide", in addition to the image, but they only pertain to image attributes (title, alt, url, etc.). Is there a way to create classes (for elements other than images, like header text and a content paragraph) in my javascript that can be added to each slide's array (and stylized in css)?

This is my current code:

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');
    });
}

Right now, the data is pulled via an image tag in my html

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

I'd like the array to be something like this:

开发者_如何学运维{
    '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"},
    ]
},

Essentially, each slide would have multiple elements that I can stylize (position, color, etc.), based on their class, so the HTML would be...

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

...and contain everything, not just the image. I'm new to this, and I've seen it done in one other slideshow, but I don't understand enough of JS to cut out all the extraneous stuff I don't need and customize it for what I do. Thanks for your help.

---

Your killing yourself here. Since you're already using jQuery use something like jQuery.Cycle. You specify the container, and it cycles every first level child in it. Those children can contain whatever you want; Cycle doesn't care.