如何在幻燈片中交叉淡入淡出圖像？

Question

我想做一個幻燈片顯示圖像與交叉淡入淡出，同時檢查下面的單選按鈕，並暫停幻燈片時，鼠標在image.All我已經做了，但背景是可見的小時間，我不想和圖像的大小增加，而淡出班級附加。

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>