javascript - How to loop 3 divs with jQuery -
i need little looping multiple divs (3 or more) using jquery. after having home page rotate main image div other divs both background image (of div only) changes links contained within div.
i had created effect stacking css , fading in image behind, require links in div change.
this html section -
<head> <title>sample</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.leanmodal.min.js"></script> <link type="text/css" rel="stylesheet" href="index.css" /> </head> now div want changing
<div class="jumbotron-1"> <div class="container"> <h1>what are</h1> <p> paragraph</p> <div class="divbutton"> <a href="#" class="mybutton">learn more</a> </div> </div> </div> <div class="jumbotron-2"> <div class="container"> <h1>what are</h1> <p> paragraph</p> <div class="divbutton"> <a href="#" class="mybutton">learn more</a> </div> </div> </div> <div class="jumbotron-3"> <div class="container"> <h1>what are</h1> <p> paragraph</p> <div class="divbutton"> <a href="#" class="mybutton">learn more</a> </div> </div> </div> i found similar code after :
var slideshowdivs = ['.jumbrotron-1', '.jumbotron-2', '.jumbotron-3']; var currentid = 0; var slideshowtimeout = 1000; $(document).ready(function() { (var = 1; < slideshowdivs.length; i++) $(slideshowdivs[i]).hide(); settimeout(slideshowchange, slideshowtimeout); }); function slideshowchange() { var nextid = currentid + 1; if (nextid >= slideshowdivs.length) nextid = 0; $(slideshowdivs[currentid]).stop(true).fadeout(400); $(slideshowdivs[nextid]).stop(true).fadein(400, function() { settimeout(slideshowchange, slideshowtimeout); }); currentid = nextid; } but doesnt seem work.
any additional thoughts?
try jquery each insted of loop
$('.jumbrotron-1,.jumbotron-2,.jumbotron-3').each(function() { $(this).hide(); settimeout(slideshowchange, slideshowtimeout); }); jsfiddle: http://jsfiddle.net/66lz2xou/2/
or
$('div[class^="jumbrotron"]').each(function() { $(this).hide(); settimeout(slideshowchange, slideshowtimeout); });
Comments
Post a Comment