制作图像幻灯片和文字通过jQuery

Question

我想做一个jQuery幻灯片显示文本（标题标签<img>中的每个文本）在下面的图像中不使用插件，我试图：（它不工作[我应该使用类div.mediumCell的标签img和文字吧]）

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

如何解决？

Answer 1

对于你的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); 
} 

编辑here, jsfiddle