如何交換照片上懸停，並使用了很多次

Question

關於這個 工作這麼多小時後，我終於做到了工作 和代碼工作正常

http://jsfiddle.net/9dLqmmvm/

<div class="fadein"> 
<img src="http://lovesharm.com/thumbssmall/22.jpg" /> 
<img src="http://lovesharm.com/thumbssmall/23.jpg" /> 
<img src="http://lovesharm.com/thumbssmall/21.jpg" /> 
</div> 




<style> 
.fadein,.fadein2 { position:relative; height:302px; width:300px;} 
.fadein img,.fadein2 img { position:absolute; left:0; top:0; } 
</style> 


<script> 
$('.fadein img:gt(0)').hide(); 
$(".fadein").hover(function(){ 
timer = setInterval(function(){ $('.fadein :first-child').fadeOut() 
.next('img').fadeIn() 
.end().appendTo('.fadein');},    
1000); 
}, function() { 
clearInterval(timer); 
}); 
</script> 

我想在同一頁面中多次使用它（A圖庫） 我想製作至少30個滑動框 如何多次使用代碼而不重複它？

Answer 1

你可以做到這一點作爲一個插件

(function($) { 
 
    $.fn.mySlideShow = function() { 
 
    return this.each(function() { 
 
     var timer, $slider = $(this); 
 
     $slider.find('img').slice(1).hide(); 
 
     $slider.hover(function() { 
 
     timer = setInterval(function() { 
 
      $slider.find(':first-child').fadeOut() 
 
       .next('img').fadeIn() 
 
       .end().appendTo($slider); 
 
      }, 
 
      1000); 
 
     }, function() { 
 
     clearInterval(timer); 
 
     }); 
 
    }); 
 
    } 
 
})(jQuery); 
 

 
jQuery(function($) { 
 
    $('.fadein').mySlideShow(); 
 
});

.fadein { 
 
    position: relative; 
 
    height: 302px; 
 
    width: 300px; 
 
} 
 
.fadein img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.fadein img { 
 
    display: none; 
 
} 
 
.fadein img:first-child { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fadein"> 
 
    <img src="http://lovesharm.com/thumbssmall/22.jpg" /> 
 
    <img src="http://lovesharm.com/thumbssmall/23.jpg" /> 
 
    <img src="http://lovesharm.com/thumbssmall/21.jpg" /> 
 
</div> 
 
<div class="fadein"> 
 
    <img src="http://lovesharm.com/thumbssmall/22.jpg" /> 
 
    <img src="http://lovesharm.com/thumbssmall/23.jpg" /> 
 
    <img src="http://lovesharm.com/thumbssmall/21.jpg" /> 
 
</div> 
 
<div class="fadein"> 
 
    <img src="http://lovesharm.com/thumbssmall/22.jpg" /> 
 
    <img src="http://lovesharm.com/thumbssmall/23.jpg" /> 
 
    <img src="http://lovesharm.com/thumbssmall/21.jpg" /> 
 
</div>