Question

我需要使用以下代码进行幻灯片演示：

<div id="galerry-one" class="gallery">
    <div class="content">
        <ul>
            <li id="content-1"><img src="image1.jpg" /></li>
            <li id="content-2"><img src="image2.jpg" /></li>
            <li id="content-3"><iframe src="http://www.youtube.com/..."></iframe></li>
            <li id="content-4"><img src="image3.jpg" /></li>
            <li id="content-5"><iframe src="http://www.youtube.com/..."></iframe></li>
        </ul>
    </div>
    <div class="thumbnails">
        <span class="prev"> « </span>
        <ul>
            <li id="go-content-1"><img src="image1_thumbnai.jpg" /></li>
            <li id="go-content-2"><img src="image2_thumbnai.jpg" /></li>
            <li id="go-content-3"><img src="youtube1_thumbnai.jpg" /></li>
            <li id="go-content-4"><img src="image3_thumbnai.jpg" /></li>
            <li id="go-content-5"><img src="youtube2_thumbnai.jpg" /></li>
        </ul>
        <span class="next"> » </span>
    </div>
</div>

好的，当我点击带有a ID的go-content-1时，所有其他幻灯片都会隐藏，1显示等等。

我的开始：

$(document).ready(function() {
    $('.gallery').each(function(index, element) {
        var id = $(this).attr('id');
        var images = $('#' + id + ' .content li').index() -1;

        $('#' + id + ' .prev').click(function(e) {
            e.preventDefault();

            if($('#' + id + ' .content .current').prev().length == 0 ) {
                $('#' + id + ' .content .current').removeClass('current').hide();
                $('#' + id + ' .content li:last').addClass('current').show();
            } else {
                $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().prev().fadeIn(1000).addClass('current').show();
            }

            return false;
        });

        $('#' + id + ' .next').click(function(e) {
            e.preventDefault();

            if($('#' + id + ' .content .current').next().length == 0 ) {
                $('#' + id + ' .content .current').removeClass('current').hide();
                $('#' + id + ' .content li:first').addClass('current').show();
            } else {
                $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().next().fadeIn(1000).addClass('current').show();
            }

            return false;
        });

        $('#' + id + ' .thumbnails li').click(function(e) {
            e.preventDefault();

            $('#' + id + ' .content .current').removeClass('current').hide();
            $('#' + id + ' .content .thumbnails').removeClass('current');
            $('#' + id + ' .content li').eq($(this).index()).fadeIn(1000).addClass('current').show();

            return false;
        });

        $('#' + id + ' .content li:first').addClass('current').show();
    });
});

现在的问题是每次只显示4个缩略图。谢谢！

Answer 1

不要在id中硬编码。使用next和prev。

另外我建议阅读delegate，它会提高客户端的性能并使代码更清晰。提示：使用委托而不是你写的第二行。

快乐学习！：）

带缩略图的jQuery幻灯片

1 个答案: