私は自分のサイトで少し巧妙な jQuery サイクルを作成しましdata
た。特定のスライドから、実際のスライダーの上にある別の div にロードする必要があるため、次/前を押すたびに正しいデータがロードされます。 -私の質問は、配列内の正しいデータに対応するようにインデックスを設定する方法のコールバックにありますか? 本当の問題は、サイクルではなく、配列内のデータにアクセスすることだと思います。
var array = [
{
url: 'slide01.jpg',
data : 'Eat, <br /> Drink, <br /> Escape!'
},
{
url: 'slide02.jpg',
data : 'Eat, <br /> Drink, <br /> Escape!2'
},
{
url: 'slide03.jpg',
data : 'Eat, <br /> Drink, <br /> Escape!3'
},
{
url: 'slide04.jpg',
data : 'Eat, <br /> Drink, <br /> Escape!4'
},
{
url: 'slide05.jpg',
data : 'Eat, <br /> Drink, <br /> Escape!5'
}
];
var path = 'img/';
$.each(array, function(i) {
$('#slider').append('<li data-id="' + i + '"><img src=' + path + array[i].url + '></li>');
});
$('#slider').cycle({
fx: "scrollHorz",
next: "#next",
prev: "#prev",
speed: 1000,
timeout: 5000,
before: onBefore(),
after: onAfter(),
cssBefore: {
opacity: 0
},
animIn: {
opacity: 1
},
animOut: {
opacity: 0
},
cssAfter: {
opacity: 1
},
delay: 3000
});
function onBefore() {
$('#content').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
$('#content').empty().append('<h1>' + array[i].data + '</h1>');
}