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

Question

我想在下面的图片中使用show text（标题标记<img>中的每个文本）制作一个jquery幻灯片，而不使用插件，我试着:(它不起作用[我应该使用类{{1}标签div.mediumCell并将其发送给文本]）

DEMO： http://jsfiddle.net/pzyxk/

img

如何解决？

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