每次点击都会获得下一个img(Get next img on each click)

每次点击都会获得下一个img(Get next img on each click)

我有一个包含imgs的div。 我在一个大div中制作了两个箭头（prev，next），使用第一个div中的一个imgs的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>'; }

I have a div containing imgs. I've made two arrows(prev, next) inside a large div using as background url the src of one of the imgs from the first div. I'm trying to make the next arrow, when pressed, to change the large image by using the src from the next one. And start from the beginning afterwards(loop).

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>'; }

最满意答案

我敢肯定有更多jQuery-adept可以做得更好：

演示： 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>

I've made it work using this:

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 + ')'); }); }); }