我做了一個粗略的腳本，用淡入淡出來改變圖像，我想每5秒更換一次，同時從圖像池中取出新圖像。在這種情況下，我有4個JPEG文件使用順序名：dish1 dish2 dish3 dish4但它會導致頁面加載，並在圖像上沒有變化：jquery圖像隨着時序源淡入淡出

$(document).ready(function(){  
    function chngImg(curImg=1,imgNum=4){ 
    var src = "immagini/dishes_pizze/dish" + curImg + ".jpg"; 
    $('#picture').fadeOut("slow"); 
    $('#picture').attr('src', src); 
    $('#picture').fadeIn("slow"); 
    curImg++; 
    if (curImg>imgNum){ 
     curImg=1; 
    } //end if 
    setTimeout('chngImg(curImg, imgNum);', 5000); 
    } // end chngimg 
}); //endready

任何幫助將是有益的，我是新的jQuery。

來源

2014-02-18 user3322215

問題是，當你在setTimeout函數傳遞函數名，函數必須是公開的，但在你的代碼，函數chngImg在$(document).ready內聲明。它是本地函數，這就是爲什麼你的代碼不運行。你不能設置參數的默認值。

你的代碼應該是

function chngImg(curImg, imgNum) { 
    if (!curImg) { 
     curImg = 1; 
    } 

    if (!imgNum) { 
     imgNum = 4; 
    } 

    var src = "immagini/dishes_pizze/dish" + curImg + ".jpg"; 
    $('#picture').fadeOut("slow"); 
    $('#picture').attr('src', src); 
    $('#picture').fadeIn("slow"); 
    curImg++; 
    if (curImg > imgNum) { 
     curImg = 1; 
    } //end if 
    setTimeout('chngImg(curImg, imgNum);', 5000); 
} 

$(document).ready(function() { 
    chngImg(); 
});

或者您也可以通過回調setTimeout這樣的：

$(document).ready(function() { 
    function chngImg(curImg, imgNum) { 
     if (!curImg) { 
      curImg = 1; 
     } 

     if (!imgNum) { 
      imgNum = 4; 
     } 

     var src = "immagini/dishes_pizze/dish" + curImg + ".jpg"; 
     $('#picture').fadeOut("slow"); 
     $('#picture').attr('src', src); 
     $('#picture').fadeIn("slow"); 
     curImg++; 
     if (curImg > imgNum) { 
      curImg = 1; 
     } //end if 

     setTimeout(function() { 
      chngImg(curImg, imgNum); 
     }, 5000); 
    } 

    chngImg(); 
});

來源

2014-02-18 07:33:51 ducdhm

感謝您的幫助，我想無論是代碼，第二個工作得很好，但還是有問題，淡出前的圖像變化完成，所以你真正看到它改變了形象，你不應該。（'＃picture'）。fadeOut（「slow」，function（）{ $（this）.attr（'src'，src）我在這裏編輯了變化的圖像代碼，如@arun所示： $ .fadeIn（「慢」）}）; 它的工作方式 – user3322215

試試這個：

setTimeout(function() { chngImg(curImg, imgNum) }, 5000);

來源

2014-02-18 07:23:29

有在腳本中多個問題，請嘗試

$(document).ready(function() { 
    var curImg = 1, 
     imgNum = 4; 

    //method signature does not allow default values 
    function chngImg() { 
     var src = "immagini/dishes_pizze/dish" + curImg + ".jpg"; 
     //change source after the image is hidden 
     $('#picture').fadeOut("slow", function() { 
      $(this).attr('src', src).fadeIn("slow", function() { 
       //again schdule next iteration using setTimeout() 
       setTimeout(chngImg, 5000) 
      }); 
     }); 
     curImg++; 
     if (curImg > imgNum) { 
      curImg = 1; 
     } //end if 
    } // end chngimg 
    //initialize the loop 
    chngImg(); 
}); //endready

來源

2014-02-18 07:24:22

Live Demo

一個更好的辦法是使用setInterval(func, delay)，將調用你的函數每隔delay毫秒。
在curImg變量中，我們將全局圖像的實際編號存儲起來，然後我們用setInterval()調用chngImg()函數，它將每5秒執行一次。 chngImg()功能與您的功能完全相同。

$(document).ready(function() {  
    var curImg = 1; 
    setInterval(function chngImg(imgNum) { 
     var src = "immagini/dishes_pizze/dish" + curImg + ".jpg"; 
     $('#picture').fadeOut("slow"); 
     $('#picture').attr('src', src); 
     $('#picture').fadeIn("slow"); 
     ++curImg; 
     if (curImg > imgNum) { 
      curImg = 1; 
     } 
    }, 5000); 
});

來源

2014-02-18 07:39:49 totymedli

jquery圖像隨着時序源淡入淡出

回答

Live Demo

相關問題