Issue regarding building an image Carousel with jQuery -
Issue regarding building an image Carousel with jQuery -
i have developed carousel jquery 1 images showing 1 after 1 made error in html flashing when line execute.
$('.headercarouselwrapper :first-child').fadeout().next('img').fadein() here total jquery , html code. please see , guide me how create smooth transition.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var bba = { init: function () { this.slideshow(); homecoming this; }, slideshow: function () { $('.headercarouselwrapper img:gt(0)').hide(); setinterval(function () { $('.headercarouselwrapper :first-child').fadeout() .next('img').fadein() .end().appendto('.headercarouselwrapper'); }, 5000); $('.partsbasecarouselwrapper img:gt(0)').hide(); setinterval(function () { $('.partsbasecarouselwrapper :first-child').fadeout() .next('img').fadein() .end().appendto('.partsbasecarouselwrapper'); }, 5000); $('.careerbasecarouselwrapper img:gt(0)').hide(); setinterval(function () { $('.careerbasecarouselwrapper :first-child').fadeout() .next('img').fadein() .end().appendto('.careerbasecarouselwrapper'); }, 5000); $('.knowledgebasecarouselwrapper img:gt(0)').hide(); setinterval(function () { $('.knowledgebasecarouselwrapper :first-child').fadeout() .next('img').fadein() .end().appendto('.knowledgebasecarouselwrapper'); }, 5000); homecoming this; } }; $(document).ready(function () { bba.init(); }); </script> </head> <body> <form id="form1" runat="server"> <div class="headercarouselwrapperouter" style="width: 100%"> <div class="headercarouselwrapper"> <img src="images/new-bba-header-image1dyna.jpg" alt="" style="width: 100%"/> <img src="images/new-bba-header-image2dyna.jpg" alt="" style="width: 100%"/> <img src="images/new-bba-header-image3dyna.jpg" alt="" style="width: 100%"/> <img src="images/new-bba-header-image4dyna.jpg" alt="" style="width: 100%"/> </div> </div> </form> </body> </html> use css position create sure images atop 1 another, prepare jumping effect break animation 2 function calls sec starts before first finishes pass time interval fadein() , fadeout() , tweak them until desired effect achieved
it help if images made same height.
class="snippet-code-js lang-js prettyprint-override"> var bba = { init: function () { this.slideshow(); homecoming this; }, slideshow: function () { $('.headercarouselwrapper img:gt(0)').hide(); setinterval(function () { $('.headercarouselwrapper :first-child').fadeout(1000); $('.headercarouselwrapper :first-child').next('img').fadein(400).end().appendto('.headercarouselwrapper'); }, 5000); } }; $(document).ready(function () { bba.init(); }); class="snippet-code-css lang-css prettyprint-override">.myimgs { width:100%; position:absolute; top:0; left:0; } .headercarouselwrapperouter { width:100%; position:relative; background-color:#000000; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="headercarouselwrapperouter"> <div class="headercarouselwrapper"> <img src="http://www.bba-reman.com/images/new-bba-header-image1dyna.jpg" alt="" class="myimgs" /> <img src="http://www.bba-reman.com/images/new-bba-header-image2dyna.jpg" alt="" class="myimgs" /> <img src="http://www.bba-reman.com/images/new-bba-header-image3dyna.jpg" alt="" class="myimgs" /> <img src="http://www.bba-reman.com/images/new-bba-header-image4dyna.jpg" alt="" class="myimgs" /> </div> </div> </body>
jquery
Comments
Post a Comment