Question

我看了一些已发布的答案，但没有找到正确的方法我在同一个div中有2张图片，其中一张是可见的，另一张是display:none; 我希望在2个图像之间有一个非结束循环，具有淡出/淡入效果，没有任何jQuery插件。

我认为，这只是几行代码。

Answer 1

这只是一个快速而肮脏的解决方案，但也许它可以帮助您了解如何解决您的问题......

function swap ( $img1 , $img2, speed ) {
    $img1.stop().fadeOut(speed);
    $img2.stop().fadeIn(speed);

    setTimeout( function () { swap( $img2, $img1, speed) }, speed );
};

Answer 2

优雅而简单的方式：

function fadeShow(fadeTime, fadeDelay) {
  var $topImage = $("#fadeBox img:last");
  $topImage.fadeTo(fadeTime, 0, function() {
    $topImage.fadeTo(fadeDelay, 0, function() {
      $topImage.fadeTo(0, 1);
      $topImage.insertBefore("#fadeBox img:first");
      fadeShow(fadeTime, fadeDelay);
    });
  });
}

fadeShow(2000, 5000);

#fadeBox {
  position: relative;
}

#fadeBox img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadeBox">
  <img src="https://lh5.googleusercontent.com/-vp16kljkPwg/AAAAAAAAAAI/AAAAAAAAAKg/Ypz8rdBRFjQ/s200-c/photo.jpg">
  <img src="https://lh5.googleusercontent.com/-uQqDiQ92aZQ/TiZspaC99wI/AAAAAAAAAFE/KZU_RIKUfTI/s200-c/photo.jpg">
</div>

View on JSFiddle

支持多个图像，但它们必须全部大小相同。玩得开心。：）

Answer 3

var blink_data={};
function start_blink(id)
{
    blink_data={subj:document.getElementById(id),duration_in:600,duration_sus:400,time_in:new Date,proc_in:function(){
        var c=new Date;
        var d=(c.getTime() - blink_data.time_in.getTime())/blink_data.duration_in;
        if(d>1){
            d=1;
            clearInterval(blink_data.interval);
            blink_data.interval=null;
            blink_data.timeout=setTimeout(function(){
                blink_data.interval=setInterval(blink_data.proc_out,50);
                blink_data.time_out=new Date;
                blink_data.timeout=null;
            },blink_data.duration_sus);
        }


        blink_data.subj.style.filter="alpha(opacity="+d*100+")";
        blink_data.subj.style.opacity=d;

    },duration_out:600,time_out:new Date,proc_out:function(){
        var c=new Date;
        var d=(c.getTime() - blink_data.time_out.getTime())/blink_data.duration_out;
        if(d>1){
            d=1;
            clearInterval(blink_data.interval);
            blink_data.interval=null;
            blink_data.timeout=setTimeout(function(){
                blink_data.interval=setInterval(blink_data.proc_in,50);
                blink_data.time_in=new Date;
                blink_data.timeout=null;
            },blink_data.duration_sus);
        }

        d=1 - d;
        blink_data.subj.style.filter="alpha(opacity="+d*100+")";
        blink_data.subj.style.opacity=d;

    },timeout:null,interval:null};
    blink_data.interval=setInterval(blink_data.proc_in,50);
}

function stop_blink()
{
    if(blink_data.timeout){
        clearTimeout(blink_data.timeout);
    } else if(blink_data.interval){
        clearInterval(blink_data.interval);
    }
    blink_data.subj.style.filter="alpha(opacity=0)";
    blink_data.subj.style.opacity=0;
}

您只需要淡化/淡出一张图像（如果您没有使用透明图像）并让图像在顶部淡入淡出。（并删除显示：无风格）

如果你有这样的结构：

<div>
<img id='img1' src='path/to/image.jpg'/>
<img id='img2' src='path/to/image2.jpg'/>
</div>

使用

调用该函数

start_blink('img2');

Answer 4

说你的HTML是：

<div>
    <img src="..." id="img1"/>
    <img src="..." id="img2"/>    
</div>

您的JavaScript可以是这样的：

fadeOutIn('#img1', '#img2');



function fadeOutIn(elmt1, elmt2){
    alert("1");
    $(elmt1).fadeOut(1, function(){

        $(elmt2).fadeIn(1, function(){
            //add a time out here if you want the image to stay for a while before fading
            fadeInOut(elmt2, elmt1);
        }):

    });   
}

如果你希望淡出和淡入分开发生，如果你想让它们同时发生，那么就像在Greg的答案中一样同时调用它们。

循环fadeIn和fadeOut两个图像之间

4 个答案: