javascript - 脚本更改图片。在完成的代码中

Question

你好! 如何制作一个非常简单的动画。 在这段代码中？ 例如，每 5 秒图片就会改变一次。

现在我只做了一个。必然需要一个预加载器。

这是原始文章。 http://www.htmldrive.net/items/show/1080/jQuery-useful-preload-image-effect

我删除了所有不必要的。我只留下了预加载器和加载图片“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;}

下一个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;
    } 
}