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_02.jpg'替换'project_xyz_01.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

为了让图像淡化尝试使用带有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 2

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

$(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 3

你需要这样的东西

$(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并加载淡入...

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

Answer 4

您可以使用它来交换图像。此处，总数将是文件夹中的图像总数。

<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

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

5 个答案: