单击图像替换转到文件夹中的下一个图像

Question

首先，我是一名设计师，对 jquery 知之甚少。我通常能够进行研究并找到执行我想要的脚本，然后对其进行一些更改。但是这次我已经做了 4 天的研究，仍然找不到任何与我正在寻找的东西足够接近的东西。

目前我使用这个脚本：

   $(function(){
      $(".img-swap").live('click', function() {

        if ($(this).attr("class") == "img-swap") {
          this.src = this.src.replace("_1","_2");
        } else {
          this.src = this.src.replace("_2","_3");
        }
        $(this).toggleClass("on");
      });
    });

我在网站上有单张图片。单击时，图像应像这样替换：

我有最多包含 10 张图片的文件夹。它们被命名为'projectxyz_01.jpg'等。我现在需要的是一个脚本，点击时将'project_xyz_01.jpg'替换为'project_xyz_02.jpg'等等。如果文件夹中没有更多图片，请返回第一个。如果图像褪色就好了。

我目前使用的脚本当然只能从 1-3 开始，不会褪色，也不会回到第一张图像。

这是图像容器：

        <div class="slideshow_querformat">
            <img src="images/mmd/mmd_test_01.jpg" class="img-swap" border="0" alt="social media webcalender" title="Klicken, um die nächste Arbeit zu sehen." />
        </div>

这是css部分：

   .slideshow_querformat { 
width:60.25%;
min-width:700px;
height:auto;
margin: 0 auto 0 auto;
text-align:center;
position:relative;
z-index:999;
    }

   .slideshow_querformat img { 
max-width:100%;
max-height:100%;
cursor:pointer;
margin-left:16px;
    }

Answer 1

你需要这样的东西

$(function(){
  $(".slideshow_querformat").on('click', '.img-swap', function() {
    var self = this,
        file = this.src,
        common = file.substring(0, file.length-6)
        currentId =  +file.substr(-6,2),
        id = ('0' + (currentId+1)).substr(-2),
        nextimage= new Image();

    nextimage.onload = function(){
       // image was preloaded so it exists
       var img = this;
       $(self).fadeOut(300, function(){self.src = img.src; $(self).fadeIn(300)});
    };
    nextimage.onerror = function(){
       // error occured while preloading. we assume image does not exist
       $(self).fadeOut(300, function(){self.src = common+ '01.jpg'; $(self).fadeIn(300)});
    };
    nextimage.src = common + id + '.jpg';
  });
});

演示（不展示错误案例）http://jsfiddle.net/gaby/3PFGF/

此脚本的作用是尝试预加载新图像，如果成功则淡出当前图像，交换src 属性并淡入新图像..

如果发生错误（我们理解为图像不存在），我们会将名称设置为 01 并加载淡入到那个..

---

您应该使用.on()，而不是已弃用的.live()，但如果您需要有关如何操作的建议，则必须提供更多的html（图像的容器）有效地使用它..

Answer 2

为了使图像褪色，请尝试使用带有 setTimeout 功能的“fadeOut”...类似这样...

setTimeout(function(){$("your_image_id").fadeOut("fast");},2000);

这里 2000 是可选的，您可以根据自己的需要进行设置...如果您希望它变慢，请使用“慢”而不是“快”...

要获取第一张图片...进行检查...像这样...

if($(this).attr('src') == 'project_xyz_10.jpg') {
  this.src = this.src.replace("_10","_1");
}

可能有用...

Answer 3

您可以使用模运算符循环显示图像。

$(function() {
    $(".img-swap").on('click', function() {
        var src = this.src.substr(-6, 2);
        console.log(src);
        this.src = "project_xyz_" + ("0" + ((parseInt(src) + 1) % 10)).substr(-2) + ".jpg";
    });
});

Answer 4

您可以使用它来交换图像。在这里，total 将是您在文件夹中拥有的图像总数。

<script type="text/javascript">


   $(function(){
      count = 1;
      total = 4;


      $(".img-swap").on('click', function() {

        $(this).fadeOut(400, function() {
            $(this).attr('src', 'projectxyz_0' + count + '.jpg');
        }).fadeIn(400);

        count ++;

        if(count > total) {
            count = 1;
        }

      });
    });
</script>

Answer 5

您可以循环浏览如下图片

<img class='img-swap' src='projectxyz_1.jpg'/>

var imgCnt = 10;

$(function() {
    $(".img-swap").live('click', function() {
        var str = $(this).attr('src');
        var strCurrNo = str.substring(str.indexOf('_') + 1, str.indexOf('.'));
        var curImg = parseInt(strCurrNo);
        var nextNo = imgCnt > curImg ? curImg + 1 : 0;

        $(this).fadeOut(400, function() {
            $(this).attr('src', str.replace("_" + strCurrNo, "_" + (nextNo)))
        }).fadeIn(400);


    });
});

一个工作的demo is added here