如何在純JavaScript滑塊上使用jQuery效果？

Question

我需要爲學校項目創建純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 

Answer 1

您可以在代碼的任何地方，一個語句結束把你的jQuery JavaScript的範圍內。你只需在使用jquery之前添加jquery庫。像在第一個函數中一樣。

function firstImg(){ 
    new_img.src=images[0]; 
    //your jquery code like 
    // $('.selector').click(function(){ 
    // alert('jquery works'); 
    //}) 
    parent.appendChild(new_img); 
}