イメージを作るSlideShowとテキストをjQueryで

次のイメージでは、プラグインなしで表示テキスト（各テキストはタイトルタグ<img>）でjqueryスライドショーを作成したいと思う：（それは動作しない[私はクラスタグimgとテキストのためのdiv.mediumCellそれ]）イメージを作るSlideShowとテキストをjQueryで

DEMO：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(); 
};

どのようにそれを修正するのですか？

出典

2012-01-10 Kate Wintz

あなたの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は、以下のとおりです。私は、コードを変更しhere, jsfiddle

出典

2012-01-10 18:18:52 devdRew

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); }

編集、それは、動作しませんを参照します。http：// jsfiddle。 net/pzyxk/3/ –

私のコードを変更しました）コードを変更しないようにして、必要に応じてHTMLを再フォーマットしてください。// でdiv.presentationが必要です。' – devdRew

OK、ここではうまくいきません：http://jsfiddle.net/pzyxk/9/ –

イメージを作るSlideShowとテキストをjQueryで

答えて

関連する問題