Script change the pictures. In the finished code

Question

Hello! How is it possible to make a very simple animations. In this code? For example, every 5 seconds the picture changed.

Now I have made only one. Necessarily need a preloader.

And here is the original article. http://www.htmldrive.net/items/show/1080/jQuery-useful-preload-image-effect

I removed all unnecessary. I left only the preloader and loading pictures "script.js". Also on the site, I have only "javascript & jquery". I removed: https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

I would be grateful for your help. Thanks.

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

There is such code. How do I make constantly changing images? Preload & next play images:

"images/01.png", "images/02.png";

I think we are talking about different things... Thank you again.

you _could_ use a css sprite or an svg image with embedded image(s) and simply change the offset — technosaurus, Feb 22 '13 at 20:53

Konstantin Krass · Answer 1 · 2013-02-22T21:35:21.783

0

To make function calls in a specific interval check: http://www.w3schools.com/jsref/met_win_setinterval.asp

Build a method, that loads a img and show it on image done loading.

threadID = setInterval(LoadImage, 3000);  //Calls your method every 3 seconds.

With clearInterval you can stop this.

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

Hope I this was helpful.

//EDIT:

if you store your images like this:

image-1 image-2 image-3

you can do it like this:

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

edited Feb 22 '13 at 21:35

answered Feb 22 '13 at 20:30

Konstantin Krass

8,626
1
18
24

Thanks. I do not use the call button. This fragment in the code I do not use. I do not understand how to link two URL address and display images on a timer. Example: img_url = "preload_image/images/me-banner.png"; etc. – Erasim Konovalov Feb 22 '13 at 21:09
you can store your image urls in a array and iterate in the interval method. or as technosaurus mentioned use a css sprite and change position in every interval-call – Konstantin Krass Feb 22 '13 at 21:23
I am explained NEW the theme of this issue. If it is not difficult to show me an example of my code. I'm no expert. Thanks. – Erasim Konovalov Feb 22 '13 at 23:46

Script change the pictures. In the finished code

1 Answers1