html - JQuery Image Slider on MouseEnter -
i having issues having images rotate first image on mouseleave , resetting active. works without mouse events, need go through images on hover , reset when leaves div area. when added mouseleave event stop not reset , still go through images.
var cur = 0; var count = $('.slider_item').length; $('.slider_item').hide(); $('.slider_item').eq(0).show(); $('.image-container').mouseenter( function() { setinterval(function() { $('.slider_item').eq(cur).slidetoggle(function () { $(this).removeclass('active'); cur = (cur + 1) % count; $('.slider_item').eq(cur).addclass('active').slidetoggle('slow'); }); }, 5000); $('.image-container').mouseleave( function() { $('.slider_item').removeclass('active'); $('.slider_item').eq(0).show(); }); }); });
.image-container { width:84px; height:115px; overflow:hidden; position:relative; margin:0 auto;} .image-container img { position:relative; }
<div class="image-container"> <a href="/"><img class="slider_item active"src="image01.png" width="84" height="115" /> <img class="slider_item" src="image02.png" width="84" height="115" /> <img class="slider_item" src="image03.png" width="84" height="115" /> <img class="slider_item" src="image04.png" width="84" height="115" /> <img class="slider_item" src="image05.png" width="84" height="115" /> <img class="slider_item" src="image06.png" width="84" height="115" /> <img class="slider_item" src="image07.png" width="84" height="115" /> <img class="slider_item" src="image08.png" width="84" height="115" /> <img class="slider_item" src="image09.png" width="84" height="115" /></a> </div><!-- end image-container-->
Comments
Post a Comment