0
我想做一个幻灯片显示图像与交叉淡入淡出,同时检查下面的单选按钮,并暂停幻灯片时,鼠标在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 >
</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);
为了让'onclick'职能的工作,你应该把它们放在引号和离开了分号。不过,我更喜欢使用JQuery'$()。on()'方法,因为我经常在制作'onclick'时遇到麻烦。 –