Question

我从数组中的图像做了一个简单的幻灯片演示。除了图像之外，我还在搜索为每个“幻灯片”添加元素的方法，但它们只适用于图像属性（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来删除我不需要的所有无关的东西并根据我的工作进行自定义。谢谢你的帮助。

Answer 1

你在这里杀了自己。由于您已经在使用jQuery，因此请使用jQuery.Cycle之类的内容。您指定容器，并循环其中的每个第一级子项。那些孩子可以包含你想要的任何东西周期不关心。

单个幻灯片幻灯片中的多个数组元素？

1 个答案: