javascript - 每次点击获取下一个 img

Question

我有一个包含 img 的 div。我在一个大 div 中制作了两个箭头(上一个，下一个)，使用第一个 div 中其中一个 img 的 src 作为背景 url。我试图在按下下一个箭头时使用下一个箭头的 src 来更改大图像。然后从头开始(循环)。

JQuery:

jQuery('#next-arrow').click(function() {
        var yacht_images = jQuery('#yacht-images img');
        var imageUrl = jQuery(yacht_images).nextAll('.yacht-image').attr('src');
        jQuery('#yacht-post-image').fadeTo('slow', 0.1, function(){
            jQuery(this).fadeTo('slow', 1).fadeIn('slow').css('background-image', 'url(' + imageUrl + ')');
        });
    });

PHP:

<div id="yacht-post-image" style="background-image:url('<?php echo $post_thumbnail_url; ?>')">
          <div id="prev-arrow"></div>
          <div id="next-arrow"></div>
        </div>
        <?php }
        global $post;
        $images = get_post_meta($post->ID, 'yachts_photo', false);
        if ( $images ) {
          echo '<div id="yacht-images">';
          foreach ($images as $image) {
            if ( $image ) {
              $image_url = wp_get_attachment_url($image);
              echo '<img class="yacht-image" src="' . $image_url . '"/>';
            }
          }
          echo '</div>';
        }

Answer 1

我确信更精通 jQuery 的人可以做得更好:

演示: https://jsfiddle.net/9LeLws40/

<style>
#yacht-images img   {
    display: none;
}
#yacht-images,
.newimg {
    height: 300px;
    width: 400px;
    display: inline-block;
    border: 1px solid #000;
    background-size: cover;
}
.newimg {
    position: absolute;
    display: none;
    z-index: 1;
}
</style>
<div id="yacht-post-image">
    <div id="prev-arrow">PREV</div>
    <div id="next-arrow">NEXT</div>
    <div id="curr">1</div>
</div>
<div id="yacht-images">
    <img class="yacht-image" src="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg"/>
    <img class="yacht-image" src="http://dc.itamaraty.gov.br/imagens-e-textos/imagens-do-brasil/fauna/alta-fauna15.jpg/image_preview"/>
    <img class="yacht-image" src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG"/>
    <img class="yacht-image" src="http://map.gsfc.nasa.gov/media/060915/060915_CMB_Timeline300nt.jpg"/> 
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    var yacht_cont      =   $('#yacht-images');
    var yacht_images    =   yacht_cont.children();
    var curr_img        =   0;

    yacht_cont.css({"background-image":"url("+yacht_images[curr_img].src+")"});

    $('#next-arrow').click(function() {
            curr_img    +=  1;
            var ThisImg;
            if(yacht_images[curr_img] == undefined) {
                    curr_img    =   0;
                    ThisImg     =   yacht_images[curr_img].src
                    $(".newimg").remove();
                }
            else
                ThisImg =   yacht_images[curr_img].src;

            $("#curr").html(curr_img+1);
            $('#yacht-images').append("<div class=\"newimg\" style=\" background-image: url("+ThisImg+");\"></div>");
            $(".newimg").fadeIn();
    });
});
</script>