CODEWITHSUNDEEP
javascripthtml
Muhammad Azeem
Muhammad Azeem

Reputation: 479

Show images one after one after some interval of time

I am new person in Front End Development and i am facing one major problem is that i have 3 images placed on each others and now i want to move one image so the other image comes up and then it goes and third image comes up after some interval of time.

I want three images on same position in my site but only wants to see these three images one after one after some interval of time. Please help how i can do this??

May i use marquee property or javascript???

Upvotes: 2

Views: 29341

Answers (5)

Develoger
Develoger

Reputation: 3998

Here you go PURE JavaScript solution:

EDIT I have added image rotation... Check out live example (link below)

<script>

    var current = 0;
    var rotator_obj = null;

    var images_array = new Array();
    images_array[0] = "rotator_1";
    images_array[1] = "rotator_2";
    images_array[2] = "rotator_3";

    var rotate_them = setInterval(function(){rotating()},4000);

    function rotating(){

        rotator_obj = document.getElementById(images_array[current]);

        if(current != 0) {

            var rotator_obj_pass = document.getElementById(images_array[current-1]);
            rotator_obj_pass.style.left = "-320px";

        }
        else {

            rotator_obj.style.left = "-320px";

        }

        var slideit = setInterval(function(){change_position(rotator_obj)},30);

        current++;

        if (current == images_array.length+1) {

            var rotator_obj_passed = document.getElementById(images_array[current-2]);
            rotator_obj_passed.style.left = "-320px";
            current = 0;
            rotating();

        }

    }

    function change_position(rotator_obj, type) {

        var intleft = parseInt(rotator_obj.style.left);

        if (intleft != 0) {

            rotator_obj.style.left = intleft + 32 + "px";

        }
        else if (intleft == 0) {

            clearInterval(slideit);

        }

    }


</script>

<style>

    #rotate_outer {

        position: absolute;
        top: 50%;
        left: 50%;
        width: 320px;
        height: 240px;
        margin-top: -120px;
        margin-left: -160px;
        overflow: hidden;

    }

    #rotate_outer img {

        position: absolute;
        top: 0px;
        left: 0px;

    }

</style>

<html>
<head>
</head>
<body onload="rotating();">

    <div id="rotate_outer">
        <img src="0.jpg" id="rotator_1"  style="left: -320px;" />
        <img src="1.jpg" id="rotator_2"  style="left: -320px;" />
        <img src="2.jpg" id="rotator_3"  style="left: -320px;" />
    </div>

</body>
</html>

And a working example:
http://simplestudio.rs/yard/rotate/rotate.html

Upvotes: 3

Anton
Anton

Reputation: 32581

arrayImageSource= ["Image1","Image2","Image3"];

setInterval(cycle, 2000);
var count = 0;

function cycle()
{
  image.src = arrayImageSource[count]
  count = (count === 2) ? 0 : count + 1;
}​

Maybe something like this?

Upvotes: 1

SReject
SReject

Reputation: 3936

<html>
<head>
<script type="text/javascript">
    window.onload = function(){
        window.displayImgCount = 0;
        function cycleImage(){
            if (displayImgCount !== 0) {
                document.getElementById("img" + displayImgCount).style.display = "none";
            }
            displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1;
            document.getElementById("img" + displayImgCount).style.display = "block";
            setTimeout(cycleImage, 1000);
        }
        cycleImage();
    }
</script>
</head>
<body>
    <img id="img1" src="./img1.png" style="display: none">
    <img id="img2" src="./img2.png" style="display: none">
    <img id="img3" src="./img3.png" style="display: none">
</body>
</html>​

Fiddle: http://jsfiddle.net/SReject/F7haV/

Upvotes: 1

boz
boz

Reputation: 4908

Non-jQuery Option

If you don't want to go down the jquery route, you can try http://www.menucool.com/javascript-image-slider. The setup is just as easy, you just have to make sure that your images are in a div with id of slider and that div has the same dimensions as one of your images.

jQuery Option

The jQuery cycle plugin will help you achieve this. It requires jquery to work but it doesn't need much setting up to create a simple sliple slideshow.

Have a look at the 'super basic' demo: 

$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});

It has many options if you want something a bit fancier.

Upvotes: 4

Thanh Trung
Thanh Trung

Reputation: 3804

If you aim for good transition and effect, I suggest an image slider called "jqFancyTransitions"

Upvotes: 1

Related Questions