三张图片的jquery组合

three images combinaison jquery

本文关键字：jquery 组合 三张      更新时间：2023-09-26

我有3张图片，我想在它们之间切换!!每一张图片都将取代另一张!!有很多原因，但我被困住了!我不知道我做得对不对!如果有简单的方法，请告诉我，我会很感激的!!谢谢:)

这只是众多方法中的一种，但是

    <div class="images">
        <div id="first-image">
            <img src="#1" />
            <p>1</p>
        </div>
        <div>
            <img src="#2" />
            <p>2</p>
        </div>
        <div>
            <img src="#3" />
            <p>3</p>
        </div>
    </div>



JavaScript 

        $(".images > div").click(function(){
            //check if the clicked div is first
            var check = $(this).parent().attr('id') == 'first-image';
            if(check); ///do nothing if it's the first image
            else {
                //get the content of the images to be switched
                var clickedContent = $(this).html();
                var firstImageContent = $('#first-image').html();
                //switch the contents of each
                $(this).html(firstImageContent);
                $('#first-image').html(clickedContent);
            }
        });


您可以使用id标识显示第一篇文章的位置，然后在切换内容时使用它来引用元素。

我已经为您创建了一个jsfiddle示例。

代码:

 $(document).ready(function() {
    $(document).on("click", "img", function() {
        var htmlOfFirstDiv = $("#first").html();
        var currentDivHtml = $(this).closest("div").html();
        $("#first").html(currentDivHtml);
        $(this).closest("div").html(htmlOfFirstDiv)
    });
});

链接:点击这里查看工作示例:-http://jsfiddle.net/XUjAH/1091/

相关文章：