1

首先，我是一名设计师，对 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;
    }
4

5 回答 5

0

为了使图像褪色，请尝试使用带有 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");
}

可能工作...

于 2013-01-02T17:04:00.217 回答
0

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

$(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";
    });
});
于 2013-01-02T17:05:25.737 回答
0

你需要这样的东西

$(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()则必须提供更多的 html（图像的容器）。

于 2013-01-02T17:14:32.717 回答
0

您可以使用它来交换图像。在这里，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>
于 2013-01-02T17:16:14.070 回答
0

您可以循环浏览图像，如下所示

<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);


    });
});

此处添加了一个工作演示

于 2013-01-02T17:19:57.410 回答