如何在悬停时交换照片，并多次使用它

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>