使用带有效果的javascript onclick更改图像源答案

【问题标题】：change image source using javascript onclick with effect使用带有效果的javascript onclick更改图像源
【发布时间】：2015-07-01 16:48:15
【问题描述】：

我想用 javascript 更改图像的来源，以及类似淡出（）或类似的效果。但我需要更改不止一张图像的来源，比如 3 张图像，带有淡入淡出效果或任何其他效果.怎么样？？以下是我正在使用的代码，但它仅适用于 2 张图片我如何用于多张图片：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Untitled Document</title>
    <script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
    background:url(big-image.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
    }
#a{
    width:15%;
    height:25%;

    position:static;
}
#b{
    width:50%;
    height:45%;
    display:none;
    left:10%;
}

</style>
<body>
    <h1>
      <input type="button" value="Click here" />
    </h1>
    <div class="frame">
      <h2 align="center">
         <img src="1.png" width="15%" height="31%" class="cat" id="a">
      </h2>
      <h3 align="center">
         <img src="2.png" id="b" class="cat">
      </h3>
    </div>
  <script type="text/javascript">
  $(function(){
    $("input:button").click(function(){
        $(".cat").fadeToggle("slow");
    });
  });
  </script>
</body>
</html>

【问题讨论】：

如果是新项目，应该考虑使用jQuery的更新版本
你只是在淡化图像，这就是你想要的吗？
是的，淡出它并出现另一张图像...不需要任何经典效果，即使是简单的淡入淡出或幻灯片也可以。有没有可用的演示。

标签： javascript jquery html css image

【解决方案1】：

是的，淡出它并出现另一个图像......不需要任何优雅效果，即使是简单的淡入淡出或滑动也可以。有没有可用的演示

好的，结果必须像图像轮播一样，点击它应该保持淡入淡出

尝试使用.fadeToggle()、.prependTo()、.show()循环淡出、淡入img元素在.frame容器中的效果

$(function() {
  $("input:button").click(function() {
    $("img:last").fadeToggle("slow", function() {
      $(this).prependTo(".frame").show()
    });
  });
});

.frame {
  position: relative;
  left: 35%;
  width: 150px;
  height: 150px;
}
img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
  <img src="http://lorempixel.com/150/150/cats" />
  <img src="http://lorempixel.com/150/150/technics" />
  <img src="http://lorempixel.com/150/150/nature" />
  <img src="http://lorempixel.com/150/150/animals" />
</div>

【讨论】：

但这适用于两张图片。我希望它用于多张图片。否则我应该为每张图片编写一个单独的类。
@ManojKSharma 不确定解释 “但这是用于两个图像。我想要它用于多个图像。” 正确吗？可以描述吗？ a) 同时淡入、淡出多个图像？ b) 淡出，依次淡入多个图像？ c) 每次点击input type="button" 时淡出、淡入一张图片？
我的意思是说，我可以显示第二张图片，但是当我再次点击时它会返回到第一张图片，所以我只有两张图片可以显示。我的意思是，点击这里按钮应该像一个“下一个图像”按钮，当我点击它时，下一个图像应该淡出。让我坐下，我有 4 张图片，每次点击，它们都会一张一张地淡入淡出。
@ManojKSharma " 我的意思是说，我可以显示第二张图片，但是当我再次点击它会返回到第一张图片，所以我只有两张图片要显示。 " 是的。 html 在 Question 中只出现两张图片？可以描述预期的结果吗？请参阅先前评论中的 a)、b)、c)。
好的，结果一定是图片轮播，点击后会一直淡入

【解决方案2】：

By:@kmsdev 说“你应该考虑使用 jQuery 的更新版本”

我建议你也使用 CSS3 的力量

$(function(){
    $("input:button").click(function(){
        $(".cat").css("filter","blur(6px)");
    });
});

当您可以浏览这些链接时：

http://www.desarrollolibre.net/blog/tema/74/html5-css-js/el-filtro-blur-desenfoque-en-css-y-alguno-de-sus-posibles-usos#.VZOM3e1_NHw

http://codepen.io/libredesarrollo/full/xIHda

【讨论】：

你一次显示多张图片，我只想显示一张图片，其他的隐藏并点击，下一张图片应该有效果。现在图片只是淡入，这就足够了,但是我如何处理多张图片

【解决方案3】：

这样的？ jQuery 的.each() 循环遍历具有特定类的所有元素。 .attr() 更改属性，在本例中为 src。

参考文献：

https://api.jquery.com/each/

http://api.jquery.com/attr/

http://api.jquery.com/animate/

$('button').click(function(){
   $('.image').each(function(){
      $(this).animate({
        opacity: 0
      }, 300, function(){
         $(this).attr('src', 'http://www.spacecitynerd.com/launch/wp-content/uploads/2014/06/gaben.png');
      });
     $(this).animate({
       opacity: 1
     }, 300);
   });
});

img{
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button><br>
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">

【讨论】：

是的，它与我所做的相同，但方式不同，当我单击下一个图像淡入时，我想要一组图像。

【解决方案4】：

上一个示例在图像准备好（加载）之前错过了收听。

如果你想要淡出/淡入：

// Trigger action on click (or something else)
$("img").on("click", function(){

    // Store element to access it faster
    var $this = $(this);

    // Animate to hide it
    $this.animate({
        opacity: 0
    }, {
        // When completely transparent
        complete: function(){

            // Add load event to know when img is ready (loaded)
            $this.on("load", function(){

                // Show new image
                $this.animate({
                    opacity: 1
                });
            });

            // Set to image to start loading
            $this.attr("src", "newurl");
        }
    });

});

如果您想要模糊，只需通过以下方式更改动画块中的不透明度： transform: "blur(0px)" 和 transform: "blur(10px)" 您可能需要为非 Chrome 浏览器添加前缀

【讨论】：