Question

我有一个包含imgs的div。我在一个大div中制作了两个箭头（prev，next），使用第一个div中的一个img的src作为背景url。我正在尝试按下下一个箭头，通过使用下一个箭头来更改大图像。然后从头开始（循环）。

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

我用它做了它的工作：

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

每次点击都会获得下一个img

1 个答案: