Question

我想制作一个幻灯片，显示带有交叉淡化的图像，同时检查它下面的单选按钮，当鼠标在图像上时暂停幻灯片放映。我已经完成了但是背景是可见的很短的时间，我不想要和大小的附加淡出课程时图像增加。

HTML：

<div id="s2">
    <img src="F:\destp\Matchball\slideshow-master\slideshow-master\img\forest.jpg" alt="slide" id="slide">

    <div id="rbtns">
        <input type="radio" name="im" id="b1" onclick=changeImage("F:\\destp\\Matchball\\slideshow-master\\slideshow-master\\img\\forest.jpg",this); />
        <input type="radio" name="im" id="b2" onclick=changeImage("F:\\destp\\Matchball\\slideshow-master\\slideshow-master\\img\\desert.jpg",this); />
        <input type="radio" name="im" id="b3" onclick=changeImage("F:\\destp\\Matchball\\slideshow-master\\slideshow-master\\img\\red-velvet-cup.jpg",this); />
        <input type="radio" name="im" id="b4" onclick=changeImage("F:\\destp\\Matchball\\slideshow-master\\slideshow-master\\img\\sea.jpg",this); />
    </div>


    <div id="vwl">
    <a href="#">
    VIEW ALL ARTICLES &gt;
    </a>
    </div>
</div>

CSS：

#slide{

height:100%;
width:auto;
padding-top: 1%;
margin-left: 21%;

opacity: 1;

transition: opacity 1s ease-in-out ;

}

#slide.fadeOut{

  opacity:0;

}

JS：

$(document).ready(function(){
$("#slide").mouseenter(function(){
    clearInterval(setI);
});

$("#slide").mouseleave(function(){
    setI=setInterval(slideImage,3000);
});
});


 images=["F:\\destp\\Matchball\\slideshow-master\\slideshow-
   master\\img\\forest.jpg","F:\\destp\\Matchball\\slideshow-
   master\\slideshow-master\\img\\desert.jpg",
   "F:\\destp\\Matchball\\slideshow-master\\slideshow-master\\img\\red-
   velvet-cup.jpg","F:\\destp\\Matchball\\slideshow-master\\slideshow-
   master\\img\\sea.jpg"];

function changeImage(imgName,obj){

    currentImage=document.getElementById("slide");

    currentImage.className+="fadeOut";

    setTimeout(function(){
        currentImage.src=imgName;
        currentImage.className="";
        $(obj).prop("checked",true);
    },1000);
}

i=0;
function slideImage(){

if(i>images.length-1){
    i=0;
}

radioButtons=document.getElementsByName("im");
changeImage(images[i],radioButtons[i]);


i++;
}

setI=setInterval(slideImage,3000);

Answer 1

我会那样做：至少取两个相互叠放的图像容器，以便能够进行交叉淡入淡出。

请注意，此代码有点未经优化，应该指向正确的方向。接受并优化它！

    var config = {
        images: ["https://www.androidcentral.com/sites/androidcentral.com/files/styles/w550h500/public/wallpapers/street-lights-1zr.jpg?itok=16E7ayiL",
            "https://www.androidcentral.com/sites/androidcentral.com/files/styles/w550h500/public/wallpapers/abstract-wave-32t.jpg?itok=BfVUP5jD",
            "https://www.androidcentral.com/sites/androidcentral.com/files/styles/w550h500/public/wallpapers/splash-6m5.jpg?itok=Hq8wej1G",
            "https://www.androidcentral.com/sites/androidcentral.com/files/styles/w550h500/public/wallpapers/destination-diy.jpg?itok=bLmPzv-N"],
        currentImage: 1,
        currentSlide: 0,
        fadeDuration: 2000,
        slideInterval: 3000,
        slideshowTimeout: 0,
        slideshowActive: true,
        initialized0: false,
        initialized1: false
    };

    $(document).ready(function() {
        $("#slide0").attr("src", config.images[1]);
        $("#slide0").on("load", slide0Init);
        $("#radio0").prop("checked", true);

        $("#slide1").attr("src", config.images[0]);
        $("#slide1").on("load", slide1Init);

        $(".radio").on("click", radioClicked);
    });

    function slide0Init() {
        if (config.initialized0 === true && config.initialized1 === true) {
            startSlideshow();
            $(".slidewrapper").on("mouseenter", slideMouseEnter);
            $(".slidewrapper").on("mouseleave", slideMouseOut);
        }
        else {
            config.initialized0 = true;
            setTimeout(slide0Init, 1000);
        }
    }

    function slide1Init() {
        $(".slidewrapper").height($("#slide1").height());
        config.initialized1 = true;
    }

    function slideMouseEnter() {
        clearTimeout(config.slideshowTimeout);
        config.slideshowActive = false;
    }

    function slideMouseOut() {
        config.slideshowTimeout = setTimeout(slideInterval, config.slideInterval);
        config.slideshowActive = true;
        var imageIndex = (config.currentImage + 1) % config.images.length;
        config.currentImage = (config.currentImage + 1) % config.images.length;
        $("#slide" + config.currentSlide).attr("src", config.images[imageIndex]);
    }

    function startSlideshow() {
        $("#slide0").off("load");
        $("#slide1").off("load");
        config.slideshowTimeout = setTimeout(slideInterval, config.slideInterval);
    }

    function slideInterval() {
        $("#radio" + config.currentImage).prop("checked", true);
        config.currentImage = (config.currentImage + 1) % config.images.length;
        changeImage(config.currentSlide);
    }

    function changeImage(slideIndex) {
        var inverseIndex = (slideIndex + 1) % 2;
        $(".slidewrapper").height($("#slide" + slideIndex).height());
        if (slideIndex === 0) {
            $("#slide1").fadeOut(config.fadeDuration);
        }
        else {
            $("#slide1").fadeIn(config.fadeDuration);
        }
        config.currentSlide = inverseIndex;
        setTimeout(function() {
            if (config.slideshowActive === true) {
                $("#slide" + inverseIndex).on("load", startSlideshow);
            }
            $("#slide" + inverseIndex).attr("src", config.images[config.currentImage]);
        }, config.fadeDuration);
    }

    function radioClicked(e) {
        var index = parseInt($(e.target).attr("data-index"));
        if (config.currentImage !== index) {
            config.currentImage = index;
            $("#slide" + config.currentSlide).on("load", function () {
                $(".slidewrapper").height($(this).height());
                $(this).off("load");
            });
            $("#slide" + config.currentSlide).attr("src", config.images[config.currentImage]);
            if (config.currentSlide === 0) {
                $("#slide1").fadeOut(config.fadeDuration);
                config.currentSlide = 1;
            }
            else {
                $("#slide1").fadeIn(config.fadeDuration);
                config.currentSlide = 0;
            }
        }
    }

    .slidewrapper {
        position: relative;
        width: 640px;
        overflow: hidden;
        -webkit-transition: height 400ms;
        -moz-transition: height 400ms;
        -ms-transition: height 400ms;
        -o-transition: height 400ms;
        transition: height 400ms;
    }

    .slide {
        position: absolute;
        width: 100%;
    }

    .radiobuttons {
        position: absolute;
        right: 0px;
        bottom: 20px;
        left: 0px;
        text-align: center;
    }

    .contentwrapper {
        margin-top: 20px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image fader</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<div id="s2">
    <div class="slidewrapper">
        <img src="" alt="slide" id="slide0" class="slide">
        <img src="" alt="slide" id="slide1" class="slide">
        <div class="radiobuttons">
            <input type="radio" name="imageRadio" class="radio" id="radio0" data-index="0" />
            <input type="radio" name="imageRadio" class="radio" id="radio1" data-index="1" />
            <input type="radio" name="imageRadio" class="radio" id="radio2" data-index="2" />
            <input type="radio" name="imageRadio" class="radio" id="radio3" data-index="3" />
        </div>
    </div>

    <div class="contentwrapper">
        <div id="vwl">
            <a href="#">
                VIEW ALL ARTICLES &gt;
            </a>
        </div>
    </div>
</div>
</body>
</html>

如何以幻灯片方式交叉淡化图像？

1 个答案: