그림을 변경하려면 스크립트를 사용하십시오. 완성 된 코드

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

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