condoravenue Posted September 10, 2011 Share Posted September 10, 2011 I have one slideshow that goes through images only: <!doctype HTML> <html> <head> <style> .fadein { position:relative; height:332px; width:500px; top: 140px; margin: auto;} .fadein img { position:absolute; left:0; top:0; height:332px; width:500px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> delay = 1500; $(function(){$('.fadein img').hide(); $('.fadein :first-child').fadeIn(function(){slide_show();});}); function slide_show(){ $('.fadein :first-child').delay(delay).fadeOut().appendTo('.fadein'); $('.fadein :nth-child(1)').delay(delay).fadeIn(function () {slide_show();}); } </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> </div> </body> </html> But I tried to make it work with div's instead of images: <!doctype HTML> <html> <head> <style> .fadein { position:relative; height:332px; width:800px; top: 140px; margin: auto;} .fadein div { position:absolute; left:0; top:0; height:332px; width:800px; text-align: right; background-repeat: no-repeat;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> delay = 2500; $(function(){$('.fadein div').hide(); $('.fadein :first-child').fadeIn(function(){slide_show();});}); function slide_show(){ $('.fadein :first-child').delay(delay).fadeOut().appendTo('.fadein'); $('.fadein :nth-child(1)').delay(delay).fadeIn(function () {slide_show();}); } </script> </head> <body> <div class="fadein"> <div class = "slide" style = "background-image: url('http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg');"><h1>One Heading</h1><p>some extra text.</p></div> <div class = "slide" style = "background-image: url('http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg');"><h1>Two Heading</h1></div> <div class = "slide" style = "background-image: url('http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg');"><h1>Three Heading</h1></div> </div> </body> </html> This second code doesn't work. It works without the <h1> tags in each div. How can I make this work? Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.