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

Script change the pictures. In the finished code

本文关键字：代码 脚本      更新时间：2023-09-26

你好怎么可能制作一个非常简单的动画呢在这个代码中例如，每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";

我认为我们在谈论不同的事情。。。再次感谢。

要在特定的间隔检查中进行函数调用，请执行以下操作：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;
    } 
}
相关文章：