Question

我发现这个很棒的插件可以随机抽取图片并将其显示在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
                                    });


                }); 
            }

    });

如何修改代码？

Answer 1

尝试替换最后几行：

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

有了这个：

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

Answer 2

我认为你不需要插件。你很短FIDDLE。

随机图像并以div显示

2 个答案: