在一张幻灯片中使用多个数组元素？

Question

我已经从数组中的图像制作了一个简单的幻灯片。我已经寻找了一种方法来添加元素到每个“幻灯片”，除了图像，但它们只与图像属性(标题，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>

...and包含所有内容，而不仅仅是图像。我是个新手，我在另一个幻灯片中看过，但我对JS的理解还不够深入，无法去掉所有不需要的东西，并根据我所做的事情对其进行自定义。谢谢你的帮助。

Answer 1

你在这里自杀。由于您已经在使用jQuery，因此请使用类似jQuery.Cycle的内容。您指定了容器，它将循环其中的每个第一级子对象。这些子类可以包含您想要的任何内容；Cycle并不关心。