Question

添加淡入淡出的任何机会使用此功能有效，使用下面的功能在我的网站上旋转拇指

   $(document).ready(function(){
     var timer,
      count = 0,
      cycle = function(el){
        var s = el.attr('src'),
         root = s.substring( 0, s.lastIndexOf('/') + 1 );
        count = (count+1)%4;
        el.attr('src', root + ((count==0) ? 'default' : count) + '.jpg');
     };

     $('.img').hover(function(){
       var $this = $(this);
       cycle($this);
       timer = setInterval(function(){ cycle($this); }, 800);
     }, function(){
       clearInterval(timer);
     });

    })

Answer 1

这个小提琴有用吗？ 小提琴：http://jsfiddle.net/jEqrN/1/
JS：

    $(document).ready(function(){
 var timer,
  count = 0,
  cycle = function(el){
      var s = el.attr('src'),
      root = s.substring( 0, s.lastIndexOf('/') + 1 );
      count = (count+1)%4;
      var url = root + ((count==0) ? 'default' : count) + '.jpg',
          overlay = $('<img src="'+url+'" class="imgoverlay" style="height:'+el.height()+'px;width:'+el.width()+'px;"/>');
      el.before(overlay);
      el.fadeOut(300,function(){
          overlay.remove();
          el.attr('src',url).show();
      });
 };

 $('.img').hover(function(){
   var $this = $(this);
   cycle($this);
   timer = setInterval(function(){ cycle($this); }, 800);
 }, function(){
   clearInterval(timer);
 });

});

<强> CSS ：

.imgoverlay{
    position:absolute;
    top:0px;
    left:0px;
}
.img{
    position:relative;
}

JQuery循环，使用fadeIn悬停的缩略图src旋转器

1 个答案: