我的网站上有一个 100% 宽和 450 像素高的部分。
我的html看起来像这样......
<section class="interactive-banner">
<figure></figure>
</section>
我希望每个“图形”元素的宽度为 150 像素,高度为 150 像素,我想使用 jQuery 自动随机生成“图形”html,并包含一些内部 html。
我有以下...
$(function(){
var people = [
{ id: 1 },
{ id: 2 }
];
var figure = $('figure');
w = 1500;
h = 450;
var counter = 0;
var data = people[Math.floor(Math.random()*people.length)];
(function nextFade() {
counter++;
figure.clone().html(data.name).appendTo('.interactive-banner').hide().fadeIn(150, function() {
if(counter < 30) nextFade();
});
})();
});
我希望每个图形元素一个接一个地淡入 1,总共我只有 7 个原始图形,只有这 7 个会被随机克隆,直到我总共有 30 次迭代,我希望图形 html 包含每个对象内的数据在我的人员数组中,所以每个图形都是一个对象,可以这么说,输出......
<figure>
<img src="[image src from object inside array]" />
<div class="information">
<h5>[name from object inside of array ]</h5>
<p>[job title from object inside of array ]</p>
</div>
</figure>
只有在它被输出的那一刻......
<figure style="display: block;">
Chris
</figure>
我在这里创建了一个示例,如您所见,但是每个图都包含相同的信息...