pageAnchorBuilder вопрос - плагин цикла - JQuery: изменение кнопок изображения

Question

Я использую плагин Cycle для JQuery, чтобы создать ротатор баннеров с функцией pauseOnHover. У меня он работает должным образом, и даже pageAnchorBuilder работает правильно, так что он отображает изображение против 1,2,3 и т. Д. Проблема в том, что он не может найти изображения, потому что я не использую изображения в качестве селектора, а div.

Как я могу изменить следующий код, чтобы я мог указать, какое уникальное изображение будет отображаться для каждого слайда (div)? Когда я помещаю URL-адрес изображения (../images/tab.png) в тег img src, он отображает неработающую ссылку. Даже если бы это сработало, это не дало бы того, что я пытаюсь сделать, отобразить уникальное изображение для каждого элемента.

Я пытаюсь создать версию JavaScript примерно так: http://www.bazaarvoice.com

Вот мой код:

banner.js

$(document).ready(function() {
    $('.slideshow').cycle({
        speed:      200,
        timeout:    15000, 
        pager:      '#tabs',
        pagerEvent: 'mouseover',
        pauseOnPagerHover: true,
        pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
    return '<a href="path-to-link"><img src="' + slide.src + '" height="47" width="189" /></a>';
}


    });
});

Answer 1

Я думаю, вы неправильно поняли, что такое функция pagerAnchorBuilder. У вас уже должны быть элементы в DOM, и вы должны возвращать JQUERY SELECTOR для тех элементов, который соответствует каждому из слайдов (обычно по индексу, переданному в функцию). Посмотреть одну из демонстраций здесь . Это может помочь вам лучше понять, что там происходит.

Если вы пытаетесь создать цикл, который прокручивает якоря, вам ничего не нужно делать, кроме как включить вашу разметку HTML привязки внутри (предположительно) div.slidehow:

<div class="slideshow">
   <a href="path-to-link1"><img src="/images/src1.png" height="47" width="189" /></a>
   <a href="path-to-link2"><img src="/images/src2.png" height="47" width="189" /></a>
</div>

и Cycle Plugin сделает это за вас. Однако существуют некоторые ограничения для использования изображений внутри якорей с этим плагином.