腳本更改圖片。在完成代碼

Question

您好！ 怎麼可能做一個很簡單的動畫。 在這段代碼中？ 例如，每5秒的圖象改變。

現在我已經做只有一個。一定需要預加載器。

這裏是原來的文章。 http://www.htmldrive.net/items/show/1080/jQuery-useful-preload-image-effect

我刪除了所有不必要的。我只留下preloader並加載圖片「script.js」。 同樣的網站上，我只有「JavaScript的& jQuery的」。 我刪除：https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

我將不勝感激您的幫助。 謝謝。

#img_url{ 
    border: 0 none; 
    height: 44px; 
    width: 614px; 
    vertical-align: top; 
    margin-right: 0; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background-repeat: no-repeat; 
} 
#load_img{ 
    border: 0 none; 
    color: #363636; 
    font-weight: bold; 
    height: 33px; 
    text-shadow: 0 1px 0 #C5C4C4; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    cursor: pointer; 
    background-attachment: scroll; 
    background-color: #1F8BCC; 
    background-image: none; 
    background-repeat: no-repeat; 
    background-position: 0 0; 
} 
#image_content{ 
    width: 614px; 
    height: 944px; 
    text-align: center; 
    overflow: hidden; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    position: absolute; 
    left: -7px; 
    top: 66px; 
} 
#img_holder{ 
    height:944px; 
    width:614px; 
    margin:0 auto; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
} 
#img_holder img{ 
    max-width: 614px; 
    max-height: 944px; 
} 
.loadit{background:url("/images/ajaxload.gif") no-repeat scroll center center transparent;} 
.credit{font-size:12px;} 

NEXT BODI

<div id="image_content"> 
<div id="img_holder" class="loadit"></div> 
<div id="img_url" class=""></div> 
</div> 

和JAVA

$(function(){ 
    LoadImage(); 
    $("#load_img").click(function(){ 
     $("#current_img").remove(); 
     $('#img_holder').addClass('loadit'); 
     LoadImage(); 
    }); 
    function LoadImage(){ 
     var img_url = $("#img_url").val(); 
     if(img_url == ''){ 
      img_url = "images/01.png"; 
     } 
     var img = new Image(); 
     $(img).load(function(){ 
      $(this).hide(); 
      $('#img_holder').removeClass('loadit').append(img); 
      $(img).fadeIn(); 

     }).attr('src',img_url).attr('id','current_img'); 
    } 
}); 

有這樣的代碼。我如何製作不斷變化的圖像？ 預緊&下一個表演圖像：

"images/01.png", "images/02.png";

我認爲我們是在談論不同的事情......再次感謝您。

Answer 1

進行函數調用在一個特定的時間間隔檢查：http://www.w3schools.com/jsref/met_win_setinterval.asp

建立一個方法，即加載IMG，並顯示在完成加載圖像。

threadID = setInterval(LoadImage, 3000); //Calls your method every 3 seconds. 

使用clearInterval可以阻止它。

clearInterval(threadID); 

例如，

$(document).ready(function() { 
    var threadID = setInterval(loadAndDisplayImage, 5000); 

    $('button#stop').click(function() { 
     clearInterval(threadID); 
    }); 
}); 

function loadAndDisplayImage() { 
    //Code to load and display image; 
} 

希望我這是有幫助的。

//編輯：

如果您儲存圖像這樣的：

圖像-1 圖像-2 圖像3

，你可以做這樣的：

var imageCounter = 0; //imagecounter in global scope 
var imageBaseUrl = "http://yourfilehost/image-"; 
function loadAndDisplayImage() { 
    var image = new Image(); 
    image.onload = displayOnLoad; //function that displays your images; 
    image.src = imageBaseUrl + imageCounter ++ ; 

    //maybe set up limit 
    if(imageCounter >= 5){ 
     imageCounter = 0; 
    } 
}