CODEWITHSUNDEEP
javascriptcss
Amotttier
Amotttier

Reputation: 11

Use a function to call itself on interval, increase a variable, and set class values of elements with id equal to that variable

I'm trying to setup something that cycles through images

                        <div id="img_box" class="shadow" onload="imgCycle(1)";>
                        <img id="1" class='opaque imgbox selected' src="media/imgbox/chem.jpg" />
                        <img id="2" class='imgbox' src="media/imgbox/art.jpg" />
                        <img id="3" class='imgbox' src="media/imgbox/business.jpg" />
                        <img id="4" class='imgbox' src="media/imgbox/chess.jpg" />
                        </div>

by running a function which clears the styles of all these images

                        function clearActiveImage(){
                        document.getElementById(1).className = "imgbox";
                        document.getElementById(2).className = "imgbox";
                        document.getElementById(3).className = "imgbox";
                        document.getElementById(4).className = "imgbox";
                    }

                        function imgCycle(x) {
                        if ( x == undefined ) { x = 1; }
                        clearActiveImage();
                        document.getElementById(x).className = "opaque imgbox selected";
                        x = x + 1;
                        if ( x >= 4) { x = 1; };
                        setInterval(imgCycle(x), 4000);
                        return;
                    };

then increments a counter, and calls itself again after 4 seconds with the new counter. If the counter hits 4, it should return to 1.

I've got some css running which only shows the image with the opaque and selected classes.

#img_box img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}


#img_box img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

It loads fine, and I'm not getting any errors, but I can't get this to work.

Upvotes: 0

Views: 49

Answers (1)

Alain Nisam
Alain Nisam

Reputation: 680

This should do what you are looking for:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
#img_box img {
    position: absolute;
}
</style>

<div id="img_box">
    <img src="http://photo.yourmlssearch.com/11/1_a/4582564-1.jpg" />
    <img src="http://photo.yourmlssearch.com/11/2_a/4582564-2.jpg" />
    <img src="http://photo.yourmlssearch.com/11/3_a/4582564-3.jpg" />
    <img src="http://photo.yourmlssearch.com/11/4_a/4582564-4.jpg" />
</div> 

<script type="text/javascript">
$('#img_box').append('<img src="'+$($('#img_box img')[0]).attr('src')+'">');

$('#img_box img').each(function(index,item){
    $(this).css('z-index',$('#img_box img').length - index);
});

setInterval(function(){
    var visibleImages = $('#img_box img:visible');

    if(visibleImages.length == 1) {
        visibleImages.css('z-index',$('#img_box img').length + 1);

        $('#img_box img').each(function(index,item){
            $(this).css('z-index',$('#img_box img').length - index).show();
        });
    }
$($('#img_box img:visible')[0]).fadeOut(4000,function(){

});
},10);
</script>

Upvotes: 2

Related Questions