Jquery 图像之间的淡入淡出

如何使用jQuery在两个图像之间进行淡入淡出旋转？ 比如说

<img src="image01.jpg" />
<img src="image02.jpg" />

我喜欢图像淡入淡出，每幅2秒钟

---

谢谢！非常感谢。：）

我想出了一个简单的例子

<div id="imageSwap">
</div>  


 <script language="javascript" type="text/javascript">

    $(document).ready(function () {
      setImageOne();
    });

    function setImageOne() {
      $('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
    }

    function setImageTwo() {
      $('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
    }

  </script>

$（文档）.ready（函数（）{
setImageOne（）；
});
函数setImageOne（）{
$（'#imageSwap'）.fadeIn（500）.html（'）.delay（2000）.fadeOut（500，函数（）{setImageTwo（）；}）；
}
函数setImageTwo（）{
$（'#imageSwap'）.fadeIn（500）.html（'）.delay（2000）.fadeOut（500，函数（）{setImageOne（）；}）；
}

将html重写为

<div>
<img class="current slide" src="image01.jpg" style="position:absolute;"/>
<img class="slide" src="image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="image01.jpg" style="visibility:none;"/>
</div>

在基础javascript中，添加

var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
    nextSlide()
});

我没有像这样测试这个，所以可能有打字错误。 周围的div确保所有幻灯片图像都位于div所在的位置，因为它们的位置：绝对。虚拟图像不可见，但确实填充了使周围的div实际环绕所有图像所需的空间。你可能不需要这个

您的图像应该具有相似的大小，或者至少假人应该与最大的图像一样大

2c美元，

---

*-派克

我一直在寻找一种在网络摄像头图像之间淡入淡出的方法，而不会在显示的图像之间出现那种瞬间。我正在做的是将新图像设置为背景图像，淡出封闭图像，将背景图像设置为封闭图像，然后使封闭图像再次可见

你可以做点什么

我想到了这个

<style type="text/css">
    #webcamImageDiv {
        text-align: center;
        background-image: url('webcam.jpg');
        background-position: top center;
        background-repeat: no-repeat;
    }
</style>

<div id="webcamImageDiv">
    <img id="webcamImageImg" src="webcam.jpg" alt="Image Not Available" />
</div>

<script type="text/javascript">

    var refreshMillis = 10000;

    function refreshWebcam() {

      // set the div to the height of the image
      $("#webcamImageDiv").height( $("#webcamImageImg").height() );

      // get the path to the new image
      // (in your case, your other image)
      var newImg = "webcam.jpg?t=" + new Date().getTime();

      // set the background of the div
      $("#webcamImageDiv").css("background-image","url('" + newImg + "')");

      // fade out the image
      $("#webcamImageImg").fadeOut(500, function() {

        // update the img tag, show the image
        $("#webcamImageImg").removeAttr("src").attr("src", newImg).show();

        // do it again
        window.setTimeout(getWebcam, refreshMillis);
      });
    }

    $(document).ready( function() {
      window.setTimeout(refreshWebcam, refreshMillis);
    });
</script>

#webcamImageDiv{
文本对齐：居中；
背景图片：url（'webcam.jpg'）；
背景位置：上中；
背景重复：无重复；
}
var=10000；
功能刷新网络摄像头（）{
//将div设置为图像的高度
$（“#webcamImageDiv”）.height（$（“#webcamImageImg”）.height（））；
//获取新图像的路径
//（在你的情况下，你的另一个形象）
var newImg=“webcam.jpg？t=“+newdate（）.getTime（）；
//设置div的背景
$（“#webcamImageDiv”）.css（“背景图像”，“url”（“+newImg+”））”）；
//淡出图像
$（“#webcamImageImg”）.fadeOut（500，function（）{
//更新img标签，显示图像
$（“#webcamImageImg”）.removeAttr（“src”）.attr（“src”，newImg.show（）；
//再做一次
设置超时（getWebcam，刷新毫秒）；
});
}
$（文档）.ready（函数（）{
设置超时（刷新网络摄像头，刷新毫秒）；
});

使用.animate和.css来更好地控制计时

这将创建一个软交叉淡入淡出的卷轴

在每个循环中，它会将前面的不可见图像移动到“开始动画不透明度”100。完成后，上一个可见图像将设置为“不透明度0”，并移到前面，以此类推

<div>
        <div id="imageSwapA"  style="display:block; z-index:100; opacity:0;">
                <img src="imagea.png"/>
        </div>
        <div id="imageSwapB" style="display:block; z-index:101; opacity:0;">
                <img src="imagea.png"/>
        </div>
</div>

<script>
    $(document).ready(function () {

        setRollOne(); // <- animation can be triggered 

        function setRollOne() {
            $('#imageSwapA').css({'z-index':101}).animate({'opacity':1}, 3500, function(){
                    $('#imageSwapB').css({'opacity':0});
                    $('#imageSwapA').css({'z-index':100});
                    setTimeout(function(){ setRollTwo(); }, 1500);
            });
        }
        function setRollTwo() {
            $('#imageSwapB').css({'z-index':101}).animate({'opacity':1}, 3500, function(){
                    $('#imageSwapA').css({'opacity':0});
                    $('#imageSwapB').css({'z-index':100});
                    setTimeout(function(){ setRollOne(); }, 1500);
            });
        }
    });
</script>

$（文档）.ready（函数（）{
setRollOne（）；//您可以在没有jquery的情况下执行此操作。仅使用css：
图像之间的淡入淡出


.fade img{
过渡期：全部8秒；
最大宽度：200px；
}
.fade:hover img:n子对象（2）{
不透明度：0；
}
.img：第一个孩子{
位置：绝对位置；
z指数：-1；
}
我刚刚得到更新？谢谢，但现在是2015年，不要使用javascript。使用css动画。或者，使用javascript在setInterval上切换类，并使用css转换在这些类上淡入淡出。
<div>
        <div id="imageSwapA"  style="display:block; z-index:100; opacity:0;">
                <img src="imagea.png"/>
        </div>
        <div id="imageSwapB" style="display:block; z-index:101; opacity:0;">
                <img src="imagea.png"/>
        </div>
</div>

<script>
    $(document).ready(function () {

        setRollOne(); // <- animation can be triggered 

        function setRollOne() {
            $('#imageSwapA').css({'z-index':101}).animate({'opacity':1}, 3500, function(){
                    $('#imageSwapB').css({'opacity':0});
                    $('#imageSwapA').css({'z-index':100});
                    setTimeout(function(){ setRollTwo(); }, 1500);
            });
        }
        function setRollTwo() {
            $('#imageSwapB').css({'z-index':101}).animate({'opacity':1}, 3500, function(){
                    $('#imageSwapA').css({'opacity':0});
                    $('#imageSwapB').css({'z-index':100});
                    setTimeout(function(){ setRollOne(); }, 1500);
            });
        }
    });
</script>