脚本更改图片。在完成代码

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; 
    } 
}