1

こんにちは！ 非常に単純なアニメーションを作成する方法を教えてください。このコードでは？ たとえば、5 秒ごとに画像が変わります。

今は1つだけ作りました。必ずプリローダーが必要です。

で、元記事はこちら。 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;}

次のボディ

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

そしてジャバ

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

私たちは別のことについて話していると思います... ありがとうございました。

4

1 に答える 1

0

特定の間隔チェックで関数呼び出しを行うには: 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;
    } 
}
于 2013-02-22T20:30:42.847 に答える