javascript - Start over from first image when slide has reached end -
when slide through images reaches end, stops. have tried make start over, can't make happend. hope can me archieve this, taking base in code. followed som tutorials on how create image slider jquery, don't want go away code have written (if that's possible). solutions i've found far written total different ideas. here html code:
<body style="background-color: lightblue"> <div> <div id="slider" style="margin-left: auto; margin-right: auto; width: 800px; height: 800px; margin-top: 100px;"> <img src="./images/dogs.jpg" style="position: absolute;" class="active" /> <img src="./images/pic.jpg" style="position: absolute;" /> <img src="./images/mal.jpg" style="position: absolute;" /> </div> </div> and here js code:
function startslide() { var $current = $('div #slider img.active'); var $next = $current.next(); if($current.length == 0) { $next = $('#slider div:first-child'); //this code go guess } // $next.addclass('active'); $current.removeclass('active').css({ "opacity" : 0.0, "zindex" : 2 }); $("#slider img").animate({opacity: 1.0}, 2000, function() { $next.addclass('active').css({zindex: 1}); }); } so question how write code slide start on once reaches last image. , preferably keeping jquery syntax in advance
try fiddle out , see if helps: http://jsfiddle.net/enuwv/2/
i modified assignment $next when length of $current 0 this:
$next = $('#slider :first-child');
and changed animate block @ end use reference $next instead of selector had.
$next.animate({opacity: 1.0}, 2000, function() { $next.addclass('active').css({zindex: 1}); }); hope helps.
ps. i'm not sure how intend entire thing initialize fiddle starts 3 images visible -- clicking start slide link few times state should able cycle through.
i didn't have css class .active maybe using marker.
Comments
Post a Comment