Question

我下载了一个在数组中输出随机图像的JavaScript。这一切都很好，但我想添加一个标题变量，既可以作为图像替换文本，也可以显示在HTML页面上。

这是我正在使用的JavaScript代码：

(function($) {

    $.randomImage = {
        defaults: {

            path: 'images/',
            myImages: ['image01.png', 'image02.png', 'image03.png', 'image04.png ', 'image05.png ', 'image06.png ']

        }
    }

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

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

            return this.each(function() {

                var imageNames = config.myImages;

                var imageNamesSize = imageNames.length;
                var lotteryNumber = Math.floor(Math.random() * imageNamesSize);
                var winnerImage = imageNames[lotteryNumber];
                var fullPath = config.path + winnerImage;

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

            });
        };
    });
})(jQuery);

我怎么能这样说..
如果是随机的image03.png，则变量imageTitle =“这是一匹马的图像”???

然后在我的HTML代码中，我可以打印出imageTitle。

谢谢真诚 - 梅斯蒂卡

Answer 1

你走了：

(function($) {

    $.randomImage = {
        defaults: {

            path: 'http://static.php.net',
            myImages: [{
                src: '/www.php.net/images/php.gif',
                title: "This is a picture of a monkey"},
            {
                src: '/www.php.net/images/php.gif',
                title: "This is a picture of a squirrel"}
                                      ]
        }
    }

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

            return this.each(function() {
                var imageNames = config.myImages;
                var imageNamesSize = imageNames.length;
                var lotteryNumber = Math.floor(Math.random() * imageNamesSize);
                var winnerImage = imageNames[lotteryNumber].src;
                this.title = config.myImages[lotteryNumber].title;
                $(this).after("<p>" + this.title + "</p>");
                var fullPath = config.path + winnerImage;

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

$("#test").randomImage();

测试标记：

<img id="test"/>

小提琴：http://jsfiddle.net/C7hRT/1/

Answer 2

添加另一个数组

(function($) {

    $.randomImage = {
        defaults: {

            path: 'images/',
            myImages: ['image01.png', 'image02.png', 'image03.png', 'image04.png ', 'image05.png ', 'image06.png '],
            myTitles: ['t1','t2','t3','t4','t5','t6']

        }
    }

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

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

            return this.each(function() {

                var imageNames = config.myImages;

                var imageNamesSize = imageNames.length;
                var lotteryNumber = Math.floor(Math.random() * imageNamesSize);
                var winnerImage = imageNames[lotteryNumber];
                var titleText = config.myTitles[lotteryNumber];
                var fullPath = config.path + winnerImage;

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

            });
        };
    });

})(jQuery);

Answer 3

您可以轻松添加“图像选择”回调。

首先，您需要更改myImages的格式以包含图片名称：

myImages: [
    { img: 'image01.png', title: 'Pancakes' },
    { img: 'image02.png', title: 'More pancakes' },
    { img: 'image03.png', title: 'This is an image of a horse eating pancakes' },
    //...
]

然后你更新这个东西：

var winnerImage = imageNames[lotteryNumber];
var fullPath = config.path + winnerImage;
$(this).attr({
    src: fullPath,
    alt: winnerImage
});

要注意新的myImages格式：

var winnerImage = imageNames[lotteryNumber];
var fullPath = config.path + winnerImage.img;
$(this).attr({
    src: fullPath,
    alt: winnerImage.title
});

现在你有一个标题，添加回调可以通过添加：

来完成

if(config.imageChosen)
    config.imageChosen(fullPath, winnerImage.title);

在$(this).attr({之后。

一旦到位，您在调用插件时发送回调函数：

$(selector_of_your_choice).randomImage({
    myImages: [ /* The images as above */ ],
    imageChosen: function(imagePath, imageTitle) {
        /* Put the title, imageTitle, where ever you want it */
    }
});

jQuery / JS：带文字的随机图像？如何添加文字？

3 个答案: