I am looking to create a slideshow that displays images with crossfading while simultaneously highlighting radio buttons below it. I also want the slideshow to pause when the mouse hovers over an image. However, I am experiencing issues with the background briefly being visible and the image size increasing when the fadeout class is applied.
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 >
</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);