Question

您好！ 如何制作一个非常简单的动画呢？ 在此代码中？ 例如，图片每隔5秒就会改变一次。

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

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

我删除了所有不必要的内容。我只留下预加载器并加载图片“script.js”。同样在网站上，我只有“javascript＆amp; 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>

AND 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');
    }
});

有这样的代码。如何制作不断变化的图像？ 预载＆amp;接下来播放图片：

"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);

e.g。

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

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

1 个答案: