Geek Answers Handbook

The right way to create an infinite loop in div and jquery images

I have code for displaying 4 images, such as:

function fadeDivs() { var currentPanel = $("ul li:visible"); var currentPanelIndex = currentPanel.index(); currentPanel.fadeOut(1000); // If the next panel to fade in is beyond the last, start from the beginning again. if(currentPanelIndex == ($("ul li").length - 1)) { $("ul li:first-child").fadeIn(1000); } else // If it not the last li, keep going through the list { currentPanel.next().fadeIn(1000); } // Keep the ball rolling setTimeout(fadeDivs, 5000); } $(document).ready(function() { // Just to make it look nice - this can be deleted (it just filler content) $("ul li:eq(0)").html("<img src='http://barbados.org/landscap/bcparadise1.jpg'>"); $("ul li:eq(1)").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>"); $("ul li:eq(2)").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>"); $("ul li:eq(3)").html("<img src='http://www.croatia-danexumag.com/cms_upload/upload/Apartments_VERUDELA_BEACH_00.jpg'>"); // Start the ball rolling setTimeout(fadeDivs, 3000); });

Now I want to display them in matrix style with

 section.card-container{ float: left; margin:0; width:24.94%; } .card-container { position: relative; width: 200px; height: 200px; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } .card-container .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform .7s; -moz-transition: -moz-transform .7s; -o-transition: -o-transform .7s; -ms-transition: -o-transform .7s; transition: transform .7s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .card-container .card div { height: 100%; width: 100%; position: absolute; background: #FBFBFB; border: 1px solid #BFBFBF; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5); -moz-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5); -o-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5); -ms-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5); box-shadow: 0 7px 9px -8px rgba(0,0,0,.5); }

in html:

 <section class="card-container"> <div id="so1" class="card over" data-direction="right" > <div class="front" > <ul> <li class='thecontent'> CONTENT 1</li> <li class='thecontent'> CONTENT 2</li> <li class='thecontent'> CONTENT 3</li> <li class='thecontent'> CONTENT 4</li> </ul> </div> <div class="back" style="background-color:#99ca3c;"> <img src="images/fancy_cereas1.jpg" width ="100%;" height ="100%;" alt=""/> </div> </div> </section>

Now, I would like to apply this to all the cells of the 8 maps that I have in the matrix, but I cannot get it to work. It stops when it reaches 5 in the counter, and also does not display images in other cells other than 1, How to solve the problem?

look at my violin

+4
source share
1 answer

Some images can no longer be found, so I used them again.

I changed the document.ready function to this:

 $(document).ready(function() { // Just to make it look nice for(var i = 0; i < 32;){ $("ul li:eq("+(i++)+")").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>"); $("ul li:eq("+(i++)+")").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>"); $("ul li:eq("+(i++)+")").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>"); $("ul li:eq("+(i++)+")").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>"); } // Start the ball rolling setTimeout(fadeDivs, 3000); });

You have 32 leagues, but you only change html (first) 4.

Is this the behavior you are looking for? Or do you want the images to flash 1 cell at a time? I apologize if I misunderstood your question.

EDIT:

I made changes to the fadeDivs () function and added the global variable "panelIndex" used to pass through li tags.

 var panelIndex = 0; function fadeDivs() { var previousIndex = panelIndex > 0 ? panelIndex - 1 : 0; var previousPanel = $("ul li:eq("+previousIndex+")"); var uiLength = $("ul li").length; previousPanel.fadeOut(100); // If the next panel to fade in is beyond the last, start from the beginning again. if(panelIndex == (uiLength - 1)){ panelIndex = 0; } $("ul li:eq("+panelIndex+")").fadeIn(100); panelIndex++; // Keep the ball rolling setTimeout(fadeDivs, 500); }

This function shows the entire contents of li one at a time and returns to the first cell when it reaches the end. Thus, it flashes 4 images in the first cell, 4 images in the second, etc.

Is this the behavior you are looking for, or can you use it?

+1
source

More articles:


All Articles