使用 jquery 在图像之间转换答案

【问题标题】：using jquery to transition between images使用 jquery 在图像之间转换
【发布时间】：2011-12-27 15:22:27
【问题描述】：

我有两张尺寸和文字相同但颜色不同的图像（它们用作徽标）。我想使用 jQuery 在两个图像之间缓慢地自动转换。首先，我打算从这两个图像中制作一个 GIF 图像，但后来想到也许可以使用 jQuery。

jQuery 可以做到这一点吗？

我希望在没有用户输入的情况下进行转换，并且可以每 X 秒发生一次。

请告诉我如何做到这一点。

【问题讨论】：

标签： jquery html image transition

【解决方案1】：

我认为这肯定会有所帮助

http://addyosmani.com/blog/css3transitions-jquery/

还有这个

http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html

这里有一个 jquery 插件

http://plugins.jquery.com/project/bgImageTransition

【讨论】：

不幸的是，我必须支持 IE 7+ 兼容性。 CSS3 无济于事
我找到了看起来很有前途的循环插件
@Mike 请查看我添加的 jquery 插件的链接。
这也不错。我喜欢你添加的第三个链接。我想我会用它来代替。谢谢
第一个和第三个链接现在断开了。

【解决方案2】：

是的，您可以将新图像放在当前图像之上，使用绝对定位，然后使用 fadeTo 淡入新图像。您可以使用简单的 setInterval 来定期执行此操作。

编辑：fadeTo 可让您进入特定级别的透明度。使用淡入淡出更容易，它的透明度将从 100% 变为 0%。

【讨论】：

【解决方案3】：

我发现这个解决方案很简单并且适合我的需要。

它的要点是：

将所有要转换的图像放在同一个 div 中。
将其中一个的类设置为“活动”之类的内容
在 css 中，隐藏所有未将类设置为“活动”的图像
使用 jquery 选择器抓取当前“活动”元素，取消分类，并将 div 中的下一个（或第一个）图像元素设置为“活动类。使用 jquery fadeOut 和 fadeIn 来处理转换。
使用 setInterval 处理循环计时。

通过：http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html

<html>
<head>
  <script src="jquery.js">
  </script>
  <script>
    function swapImages(){
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);
    }
  </script>
  <style>
    #myGallery{
      position:relative;
      width:400px; /* Set your image width */
      height:300px; /* Set your image height */
    }
    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #myGallery img.active{
      display:block;
    }
  </style>
</head>
<body>
  <div id="myGallery">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
  </div>
</body>
</html>

【讨论】：

【解决方案4】：

function fadeInAndOut() {$('#face').fadeIn(500).delay(500).fadeOut(500)}
setInterval(fadeInAndOut, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="face" src="https://take-a-screenshot.org/secondary/img/about/face.jpg" style="display:none; position: absolute">
<img src="https://take-a-screenshot.org/secondary/img/about/blur.jpg">

【讨论】：

【解决方案5】：

我已使用此代码。我的网站。

html

<div id="kop">
            <img class="head" src="images/header_logo.png">
            <img class="head" src="images/header_naam.png">
            <img class="head" src="images/header_slogan.png">
        </div>

css

 #kop 
{ 
    position: absolute;
    width:  620px;
    height: 110px;
}

.head
{
    position: absolute;
    top: 15px;
    left: 215px;
    width: 620px;
    height: 110px;
}

jquery

 $(document).ready(function(e) {
    var delay = 3000, 
        fadeTime = 2000;
    $('.head:gt(0)').hide();
    setInterval(function(){
        $(".head:first-child").fadeOut(fadeTime).next(".head").fadeIn(fadeTime).end().appendTo("#kop")
    }, delay+fadeTime);
});

您可能需要更改一些内容，但对我来说效果很好。对于 jquery，我也从这里得到了帮助

【讨论】：