Javascript 如何在幻灯片中交叉淡入淡出图像？

我想制作一个幻灯片，显示交叉淡入淡出的图像，同时检查其下方的单选按钮，并在鼠标位于图像上时暂停幻灯片。我所做的一切，只是背景在很短的时间内是可见的，我不想看到，并且在连接淡出类时图像的大小会增加

HTML:

JS:

我会这样做： 取两个以上的图像容器，这样就可以进行交叉淡入淡出

请记住，这段代码有些未优化，应该只是为您指出了正确的方向。接受它并优化它

var配置={
图像：[”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“]，
当前图片：1，
当前幻灯片：0，
教育：2000年，
幻灯片间隔：3000，
幻灯片放映超时：0，
slideshowActive:true，
初始化为0:false，
初始化为1:false
};
$（文档）.ready（函数（）{
$（“#slide0”）.attr（“src”，config.images[1]）；
$（“#slide0”）。打开（“加载”，slide0初始化）；
$（“#radio0”）.prop（“选中”，为真）；
$（“#slide1”）.attr（“src”，config.images[0]）；
$（“#slide1”）。打开（“加载”，slide1Init）；
$（“.radio”）。在（“单击”，radioClicked）；
});
函数slide0Init（）{
if（config.initialized0==true&&config.initialized1==true）{
startSlideshow（）；
$（.slidewrapper”）。在（“mouseenter”，slideMouseEnter）上；
$（.slidewrapper”）。在（“mouseleave”，slideMouseOut）上；
}
否则{
config.initialized0=true；
设置超时（slide0Init，1000）；
}
}
函数slide1Init（）{
$（“.slidewrapper”）.height（$（“.slide1”）.height（））；
config.initialized1=true；
}
函数slidemousenter（）{
clearTimeout（config.slideshowTimeout）；
config.slideshowActive=false；
}
函数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]）；
}
函数startSlideshow（）{
美元（“#slide0”）。关闭（“加载”）；
$（“#slide1”）。关闭（“加载”）；
config.slideshowTimeout=setTimeout（slideInterval，config.slideInterval）；
}
函数slideInterval（）{
$（“#radio”+config.currentImage）.prop（“选中”，为真）；
config.currentImage=（config.currentImage+1）%config.images.length；
changeImage（config.currentSlide）；
}
函数更改图像（幻灯片索引）{
var反向指数=（滑动指数+1）%2；
$（“.slidewrapper”）.height（$（“#slide”+slideIndex.height（））；
如果（slideIndex==0）{
$（“#slide1”）.fadeOut（配置fadeDuration）；
}
否则{
$（“#slide1”）.fadeIn（config.fadeDuration）；
}
config.currentSlide=inverseIndex；
setTimeout（函数（）{
如果（config.slideshowActive==true）{
$（“#幻灯片”+反转索引）。打开（“加载”，开始幻灯片放映）；
}
$（“#幻灯片”+inverseIndex.attr（“src”，config.images[config.currentImage]）；
}，config.fadeDuration）；
}
函数（e）{
var index=parseInt（$（e.target）.attr（“数据索引”）；
如果（config.currentImage！==索引）{
config.currentImage=索引；
$（“#slide”+config.currentSlide）.on（“加载”，函数（）{
$（“.slidewrapper”）.height（$（this.height（））；
$（此）。关闭（“加载”）；
});
$（“#slide”+config.currentSlide.attr（“src”，config.images[config.currentImage]）；
如果（config.currentSlide==0）{
$（“#slide1”）.fadeOut（配置fadeDuration）；
config.currentSlide=1；
}
否则{
$（“#slide1”）.fadeIn（config.fadeDuration）；
config.currentSlide=0；
}
}
}

.slidewrapper{
位置：相对位置；
宽度：640px；
溢出：隐藏；
-webkit转换：高度400ms；
-moz转换：高度400ms；
-ms转换：高度400ms；
-o型过渡：高度400ms；
过渡：高度400ms；
}
.幻灯片{
位置：绝对位置；
宽度：100%；
}
.单选按钮{
位置：绝对位置；
右：0px；
底部：20px；
左：0px；
文本对齐：居中；
}
.contentwrapper{
边缘顶部：20px；
}

图像衰减器

要使

onclick

函数工作，您应该将它们放在引号中，并省去分号。不过，我更喜欢使用JQuery

$（）.on（）

方法，因为我经常很难让

onclick

工作。

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

#slide{

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

opacity: 1;

transition: opacity 1s ease-in-out ;

}

#slide.fadeOut{

  opacity:0;

}

$(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);