Logic for JQuery Slideshow -
i want implement vertical slide show using jquery. using vertical reel(div) in turn contains images 1 one decrementing the reel top position image size every 2 second working fine when reach last image not able implement logic start reel first images. if explanation not clear appending code:
<script type="text/javascript"> $(function() { setinterval(slideimage, 2000); }); function slideimage() { $("#imgreel").animate({ "margintop": "-=300px" }, 1000, function() { }); } </script> <style type="text/css"> img { width: 600px; height: 300px; } .imgcontainer { overflow: hidden; width: 620px !important; height: 300px !important; } div { width: 620px; } .current { z-index: 0; } .next { z-index: 1; } .imgreel { width: 620px !important; } . </style> <body> <div id="imgcontainer" class="imgcontainer"> <div id="imgreel" class="imgreel"> <div class="current"> <img src="images/summerwave.jpg" /> </div> <div> <img src="images/sunlight_and_the_wild_forest_floor.jpg" /> </div> <div> <img src="images/sunset.jpg" /> </div> <div> <img src="images/swimming_with_the_fishys.jpg" /> </div> <div> <img src="images/tearing_apart.jpg" /> </div> <div> <img src="images/teaser.jpg" /> </div> <div> <img src="images/terra_nova.jpg" /> </div> </div> </div> any appreciated
you can use other approach: let #imgreel fixed, , resize elements:
moving imgreel bottom, make if slideup element in top, appending before first element @ bottom (after last element), you'll have effect reel moving, disappearing top of current image first.
in code, using plugin scrollto:
var $reel = null; function init() { $reel = $("#imgreel") // keep first element first shown, we're going take reel bottom $reel.children("div:first").insertafter($reel.children("div:last")) // move bottom using scrollto or whatever want: $reel.scrollto("max") } function next() { // clone first element (not visible) @ end var $topelement = $reel.children("div:first") var $bottomelement = $topelement.clone().appendto($reel) // hide top element (cloned @ bottom) , remove when it's done $topelement.slideup(1000, function() { $(this).remove() }) // mark next 'current' $reel.children(".current").removeclass("current"); $bottomelement.addclass("current"); } on other hand, if don't want make infinite loop, , keeping approach, using scrollto simple this:
funnction next() { var $current = $reel.find("div.current").removeclass("current") var $next = $current.next() if(!$next.length) $next = $reel.children("div:first") $reel.scrollto($next.addclass("current"), 1000) } function prev() { var $current = $reel.find("div.current").removeclass("current") var $next = $current.prev() if(!$next.length) $next = $reel.children("div:last") $reel.scrollto($next.addclass("current"), 1000) }) hope helps :-)
Comments
Post a Comment