Wie überblendet man Bilder in einer Diashow?

Question

Ich möchte eine Diashow machen, die Bilder mit Überblendungen anzeigen und gleichzeitig Radioknöpfe darunter überprüfen und Diashow anhalten, wenn Maus auf Bild ist. Alles was ich getan habe, aber Hintergrund ist für kleine Zeit sichtbar, die ich nicht will und Größe des Bildes erhöht, während die Fadeout-Klasse angehängt ist.

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

ich es so tun würde: Nehmen Sie mindestens zwei Bild Behälter auf der jeweils liegend andere, damit Sie eine Überblendung durchführen können.

Bitte beachten Sie, dass dieser Code etwas unoptimiert ist und Sie nur in die richtige Richtung weisen sollte. Nimm es und optimiere es!

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>