Question

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

这可以用jQuery吗？

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

请让我知道如何做到这一点。

Answer 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

Answer 2

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

编辑：fadeTo让您进入特定级别的透明度。更容易使用fadeIn，它将从100％透明到0％。

Answer 3

我发现这个解决方案很简单，适合我的需求。

它的要点是：

将您想要转换的所有图像放在同一个div中。
将其中一个的类设置为＆＃34; active＆＃34;
在css中，隐藏所有未将课程设置为＆＃34;活动＆＃34;
用户jquery选择器以获取当前＆＃34;活动＆＃34; element，将其解除，然后将div中的下一个（或第一个）图像元素设置为＆＃34;活动类。使用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>

Answer 4

＆＃13;

#position2{
        margin-left:25px;
        background-color: blue;
    }

#position3{
        padding-left:25px;
        background-color: red;
    }

＆＃13;

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

＆＃13;

Answer 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，我也从这里得到了帮助

使用jquery在图像之间转换

5 个答案: