Question

我需要使用jQuery，使用户能够点击我网站上的一系列投资组合图像。基本的“下一个”图像功能。

<div class="dis_flex" id="estate_gallery">
 <div class="dis_flex" id="estate_photos">
  <img src="images/1.jpg" alt="Real Estate image 1"/>  
 </div><!-- end estate_photo -->
</div><!-- end estate_gallery -->

所以基本上我在网站入口处可以看到'1.jpg'。当'1.jpg'被点击时'2.jpg'取代它，当'2.jpg'被点击时'3.jpg'取代它等等。

以下是我对知识非常有限的看法

$(document).ready(function() {

$('#estate_photos').click(function() {
$('img').attr('src', 'images/2.jpg');
});});

所以我可以交换'src'属性，但是每次单击时如何让jQuery“加1”到* .jpg编号。

我很肯定这不是解决这个问题的正确方法，所以非常感谢任何帮助。

谢谢

Answer 1

HTML：

<div class="dis_flex" id="estate_gallery">
 <div class="dis_flex" id="estate_photos">
  <img id="carousel1" src="images/1.jpg" alt="Real Estate image 1" data-id="1"/>  
 </div><!-- end estate_photo -->

JS：

$(document).ready(function() {

  $('#estate_photos').click(function() {
    var count = $('img').attr("data-id") + 1;
    $('#carousel1').attr("data-id", count);
    $('#carousel1').attr('src', 'images/' + count + '.jpg');
 });
});

Answer 2

$(document).ready(function() {

$('#estate_photos').click(function() {


                var lastImage=$('#estate_photos').children().last();

                var lastSrc=lastImage.attr('src');

                var lastNumberPart=lastSrc.split('.')[0];

                var lastNumber=lastNumberPart.substr(lastNumberPart.length-1,lastNumberPart.length);



                 var increamented=parseInt(lastNumber)+1;
                $('img').attr('src', 'images/'+increamented+'.jpg');


            });


            });

jQuery的。点击更改图像

2 个答案: