我需要为学校项目创建纯JS滑块,我做到了,但是我想在加载下一个图像时使用jQuery fadeIn()或任何其他效果,我被困在那里。如果您有任何解决方案,请提供帮助。
window.onload=function(){
var images=["img/slide1.png",
"img/slide2.png",
"img/slide3.png"],
i=0,
len=images.length-1,
parent=document.getElementById('slides'),
new_img=document.createElement('img');
function firstImg(){
new_img.src=images[0];
parent.appendChild(new_img);
}
firstImg();
var slideShow=function(){
i++;
if(i>len){
i=0;
}
new_img.src=images[i];
parent.appendChild(new_img);
return false;
};
setInterval(slideShow, 5000);
};
解决!我解决了推杆的问题:
$("#slides > img").fadeOut(0); // at start of function
$("#slides > img").fadeToggle(1000); // at end of function
你可以把你的jquery放在javascript中语句结束的任何代码位置。你只需要在使用jquery之前添加jquery库。就像在 FirstIMG 函数中一样。
function firstImg(){
new_img.src=images[0];
//your jquery code like
// $('.selector').click(function(){
// alert('jquery works');
//})
parent.appendChild(new_img);
}