Question

我有一个非常简单的代码，用于运行图片的小幻灯片，并希望在更改时添加淡入淡出效果。我无法使用任何css或jquery，也无法找到任何不涉及这两者的内容。

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="image2.jpg"
var image3=new Image()
image3.src="image3.jpg"
//-->
</script>
<img src="image1.jpg" name="slide" width="300" height="269" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
document.images.slide.src=eval("image1.src")
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",3000)
}
slideit()

//-->
</script>

Answer 1

使用您当前的代码，淡入淡出不会起作用，因为当您切换src时，它会失去它的高度和参考。你最好实际渲染出img元素，然后切换zIndexes并设置当前/下一张幻灯片的不透明度。

Answer 2

我在SO上使用了从其他问题中提取的一些代码：Math: Ease In, ease Out a displacement using Hermite curve with time constraint

我自从缩小了5个动画插值功能后，它就不那么容易阅读了。

这是一种工作正常的方法 - 确保更新图像来源以反映有效图像。

基本上，我们使用50个步骤调用一个将在500ms内淡出目标元素的函数。完成后，我们会更改图像的来源，然后再将其淡入淡出。完成此操作后，我们会在重新开始之前设置3秒的超时时间。

<!DOCTYPE html>
<html>
<head>
<script>
///////////////////////////////////////////////////////////////////////////////////////////function cubicHermite(a,b,d,e,c){var g=a*a,f=g*a;return(2*f-3*g+1)*b+(f-2*g+a)*e+(-2*f+3*g)*d+(f-g)*c}
function interp(a,b,d,e,c){var g,f;f=e/(a/2+b+d/2);g=f*a/2;f*=b;return result=c<=a?cubicHermite(c/a,0,g,0,f/b*a):c<=a+b?g+f*(c-a)/b:cubicHermite((c-a-b)/d,g+f,e,f/b*d,0)}
function linear(a){return a}
function cubic(a){return interp(0.35,0.3,0.35,1,a)}
function doAnim(a,b,d,e){var c=a/b;setTimeout(function(){doAnimStep(0,b,c,d,e)},c)}
function doAnimStep(a,b,d,e,c){a<=b?(setTimeout(function(){doAnimStep(a,b,d,e,c)},d),e(a/b),a++):void 0!=c&&null!=c&&c()}
///////////////////////////////////////////////////////////////////////////////////////////function animFadeIn(elem, callback)
{
    doAnim(250,20,function(raw){elem.style.opacity=cubic(raw)},callback);
}

function animFadeOut(elem, callback)
{
    doAnim(500,50,function(raw){elem.style.opacity=1-cubic(raw)},callback);
}
///////////////////////////////////////////////////////////////////////////////////////////

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    slideChange();
}

var imgNames = ["img/girl.png", "img/redbaron.png"];
var imgNum = 0;

function slideChange()
{
    animFadeOut(document.images.slide, afterSlideFadedOut);

    function afterSlideFadedOut()
    {
        document.images.slide.src = imgNames[imgNum];
        imgNum++;
        if (imgNum > imgNames.length-1)
            imgNum=0;
        animFadeIn(document.images.slide, afterSlideFadedIn);
    }

    function afterSlideFadedIn()
    {
        setTimeout(slideChange, 3000);
    }
}
</script>
</head>
<body>
    <img name="slide" width="300" height="269" />
</body>
</html>

Answer 3

当然，有不止一种方法可以做到这一点，但我在这里为你做了一个小提琴：

JSFIDDLE

虽然这段代码可以使用一些清理工具，但我选择像这样解决问题：

var aImageURLs = [
    "http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg",
    "http://www.wallanu.com/wp-content/uploads/2014/03/landscape-3-hd-wallpapers.jpg", 
    "http://davidpaulboaz.org/slides/Capitol%20Reef%20Landscape.jpg"
];
var aImageObjects = [];

// build out objects
for (var i = 0; i < aImageURLs.length; i++) {
    var o = new Image();
    o.src = aImageURLs[i];
    aImageObjects[i] = o;
}

var slideImage = document.images.slide;
slideImage.currentSlide = 0;

function slideIt(iSlideFrequency) {
    function nextSlide() {
        // identify next slide
        slideImage.currentSlide++;
        slideImage.currentSlide = (slideImage.currentSlide % aImageObjects.length);
        // transition old slide out
        setOpacity(slideImage, 0);
        fadeOut(slideImage, 1000, function() {
            // transition new slide in
            slideImage.src = aImageObjects[slideImage.currentSlide].src;
            fadeIn(slideImage, 1000, function() {
                setTimeout(nextSlide, iSlideFrequency);
            });
        });
    }
    setTimeout(nextSlide, iSlideFrequency);
}

function fadeIn(oImg, iMillis, callback) {
    var iTicks = 100;
    var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0;
    var iTick = 0;
    var FadeMeIn = function(){
        var fOpacity = iTick/iTicks;
        setOpacity(oImg, fOpacity);
        iTick++;
        if (iTick <= iTicks) {
            setTimeout(FadeMeIn, iWait);
        }
        else {
            try { callback(); } catch(Err) {}
        }
    }
    FadeMeIn();    
}
function fadeOut(oImg, iMillis, callback) {
    var iTicks = 100;
    var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0;
    var iTick = 100;
    var FadeMeOut = function(){
        var fOpacity = iTick/iTicks;
        setOpacity(oImg, fOpacity);
        iTick--;
        if (iTick >= 0) {
            setTimeout(FadeMeOut, iWait);
        }
        else {
            try { callback(); } catch(Err) {}
        }
    }
    FadeMeOut();    
}

function setOpacity(oImg, fValue) {
    // assume "real browser" values (decimals)
    oImg.style.opacity = fValue;
    // adjust for IE
    var iValue = Math.ceil(fValue*100);
    oImg.style.filter = "alpha(opacity=" + iValue + ")";
}
slideIt(3000);

使用Javascript将淡入淡出添加到简单的幻灯片中

3 个答案: