2012-05-12 4 views
0

임의의 이미지를 가져 와서 div에 표시하는 훌륭한 플러그인을 발견했습니다.임의의 이미지를 div에 표시하십시오.

괜찮다 저자 링크,

http://www.robwalshonline.com/posts/jquery-plugin-random-image-on-page-load/

그것은 페이드하는 임의의 이미지를 얻을 수 있습니까?

(function($){ 

    $.randomImage = { 
     defaults: { 

      //you can change these defaults to your own preferences. 
      path: 'images/', //change this to the path of your images 
      myImages: ['containerBg.png', 'containerBg2.png'] //put image names in this bracket. ex: 'harold.jpg', 'maude.jpg', 'etc' 

     }   
    } 

    $.fn.extend({ 
      randomImage:function(config) { 

       var config = $.extend({}, $.randomImage.defaults, config); 

       return this.each(function() { 

         var imageNames = config.myImages; 

         //get size of array, randomize a number from this 
         // use this number as the array index 

         var imageNamesSize = imageNames.length; 

         var lotteryNumber = Math.floor(Math.random()*imageNamesSize); 

         var winnerImage = imageNames[lotteryNumber]; 

         var fullPath = config.path + winnerImage; 


         //put this image into DOM at class of randomImage 
         // alt tag will be image filename. 
         $(this).attr({ 
             src: fullPath, 
             alt: winnerImage 
            }); 


       }); 
      } 

    }); 

코드를 어떻게 수정할 수 있습니까? 이와

    $(this).attr({ 
            src: fullPath, 
            alt: winnerImage 
           }); 

:

    $(this).css('opacity',0.01).attr({ 
            src: fullPath, 
            alt: winnerImage 
           }).fadeIn(); 

답변

0

마지막 몇 줄을 교체하십시오. 매우 짧은 FIDDLE입니다.

0

난 당신이 플러그인이 필요하지 않습니다 생각

+0

고맙습니다. –

+0

@ Åke 제발, 대답을 승인;) –

관련 문제