Сделать изображение слайд-шоу и текст с помощью jQuery - PullRequest
Новая
       18

Сделать изображение слайд-шоу и текст с помощью jQuery

0 голосов
/ 10 января 2012

Я хочу сделать слайд-шоу jquery с текстом показа (каждый текст в теге заголовка <img>) на следующем изображении без использования плагина, я попытался как: (это не работает [я должен использовать класс div.mediumCell для тега img и напиши это])

ДЕМО: http://jsfiddle.net/pzyxk/

$('.fadein .mediumCell:not(:first)').hide();
setInterval(showNext, 3000);

function showNext() {
    $('div#caption').remove();
    var current = $('.fadein :first-child');
    var next = current.next('.mediumCell');

    current.fadeOut("slow", function () {
        $(this).appendTo('.fadein');
    })

    caption(next);
    $(next).next(".mediumCell").andSelf().fadeIn()
};

function caption(element) {
    $('<div class="mediumCell"/>').hide().html($(element).attr("alt")).insertAfter($(element)).fadeIn();
};

Как это исправить?

1 Ответ

0 голосов
/ 10 января 2012

Для вас html: 

<div class="presentaion">
    <span class="caption"></span>
    <img src="http://www.ct4me.net/images/Showing_Grade_1.jpg" width="100px" title="MyTitle_1" />
    <img src="http://www.ct4me.net/images/dmbtest.gif" width="100px" title="MyTitle_2" />
    <img src="http://celticevolution.com/images/test-201.gif" width="100px" title="MyTitle_3" />
</div>

И JS: 

show($('div.presentaion img:first')); // show first slide

function show(el) {
    el.parents('div.presentaion').find('img').hide(); // hide all slide
    el.prev('span.caption:first').html(el.attr('title')); // show caption from title
    el.show(); // show image

    setTimeout(function() {
        if (typeof(el.next('img:first')) != 'undefined') {
            show(el.next('img:first')); // set timeout to show next
        }
    }, 3000);
}

Отредактировано здесь, jsfiddle

...