使用Javascript将淡入淡出添加到简单的幻灯片中 [英] Adding fade to simple slideshow with Javascript

问题描述

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

I have a very simple code I am using to run a small slideshow of images and want to add a fading effect when they change. I am not able to use any css or jquery and cannot find anything that does not involve those two.

<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>

推荐答案

当然，有多种方法可以做到这一点，但是我在这里鼓起了一个小提琴:

Certainly, there is more than one way to do this, but I drummed up a fiddle for ya here:

JSFIDDLE

虽然此代码可能需要一些清理工作，但我还是选择了这样的解决方法:

While this code could use some cleaning up, I chose to approach the problem like this:

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将淡入淡出添加到简单的幻灯片中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！