jQuery的周期访问数据，并追加到div的

Question

我工作了一个稍微骗出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>'); 
     }  

Answer 1

事件后具有以下参数http://jquery.malsup.com/cycle/options.html：

function(currSlideElement, nextSlideElement, options, forwardFlag)

所以，你可以这样做数组[options.currSlide]该事件中..

function onAfter(currSlideElement, nextSlideElement, options, forwardFlag) { 
     $('#content').empty().append('<h1>' + array[options.currSlide].data + '</h1>'); 
    }