Самый простой ротатор изображений для четырех изображений со ссылками внизу

Question

У меня есть четыре изображения. Я хотел бы, чтобы они вращались в петле. Под изображениями находится область для текстовых ссылок для каждого изображения для просмотра изображения (внутри анимированного цикла).

Существует так много сценариев, что никто не имеет именно то, что я хочу.

Кто-нибудь может сделать какие-либо предложения?

Большое спасибо.

Answer 1

В дополнение к циклу jquery (который я очень рекомендую), есть также InnerFade, который действительно урезан: http://medienfreunde.com/lab/innerfade/

В любом случае, вам понадобится структурированное окружение HTMLваши изображения.Так что-то вроде этого

<ul class="rotate-this">
    <li><img src="foo.jpg"></li>
    <li><img src="bar.jpg"></li>
    <li><img src="foobar.jpg"></li>
</ul>

И вы бы назвали это так:

$('ul.rotate-this').cycle({ // or $('ul.rotate-this').innerfade({
    option: value,
    option: value
});

Answer 2

Я рекомендую плагин цикла: http://jquery.malsup.com/cycle/

Я использовал его только для изображений, но не для изображений и текстовых ссылок, но это только начало!

Answer 3

Я бы использовал плагин цикла и использовал бы обратный вызов после: для загрузки ссылки на изображение. Я сделал нечто похожее на сайте моей компании. Я не проверял это, но это должно быть довольно близко.

$(#imagecontainter).cycle({ after: afterSlide });

function afterSlide( currentSlide, nextSlide, options, forwardFlag) {
    $("#yourLink").attr("href", currentSlide.attr("src"));
    $("#yourLink").text(currentSlide.attr("alt"));
}