Tuesday 19 January 2016

Image slide start on mouse hover jquery


Image slide start on mouse hover jquery

<script type="text/javascript" src="js/cycle.js"></script>  // Download cycle.js from here http://jquery.malsup.com/cycle/
<script type="text/javascript">
jQuery(function($){

// Cycle plugin
$('.slides').cycle({
   fx:     'none',
   speed:   1000,
pager:  '#nav',
   timeout: 70
}).cycle("pause");

// Pause & play on hover
$('.slideshow-block').hover(function(){
$(this).find('.slides').addClass('active').cycle('resume');

}, function(){
$(this).find('.slides').removeClass('active').cycle('pause').cycle(0);
});

});
</script>

<div class="product-img slideshow-block">
     <div class="slides">
      <img src="http://yoursite.com/slide1.jpg" />
        <img src="http://yoursite.com/slide2.jpg" />
        <img src="http://yoursite.com/slide3.jpg" />
     </div>
</div>

No comments: