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

我下载了一个JavaScript，它在数组中输出一个随机图像。这一切都很好，但我想添加一个title变量，既可以作为图像alt文本输入，也可以显示在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);

我怎么能这么说……
如果为random image03.png，则变量imageTitle=“这是马的图像”

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

多谢各位 真诚的 -Mestika

添加另一个数组

(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);

添加另一个数组

(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);

您可以很容易地添加一个“image selected”回调

首先，您需要更改

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（{

stuff）之后

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

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

您可以很容易地添加一个“image selected”回调

首先，您需要更改

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（{

stuff）之后

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

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

给你：

(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();

（函数（$）{
$.randomImage={
默认值：{
路径：'http://static.php.net',
myImages：[{
src:“/www.php.net/images/php.gif”，
标题：“这是一张猴子的照片”}，
{
src:“/www.php.net/images/php.gif”，
标题：“这是一张松鼠的照片”}
]
}
}
$.fn.extend({
随机映像：函数（配置）{
var config=$.extend（{}，$.randomImage.defaults，config）；
返回此值。每个（函数（）{
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）.之后（“”+this.title+”
”）；
var fullPath=config.path+winnerImage；
$（this.attr）({
src:fullPath，
alt:winnerImage
});
});
}
});
})（jQuery）；
$（“#测试”）.randomImage（）；

测试标记：

<img id="test"/>

小提琴：

给你：

(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();

（函数（$）{
$.randomImage={
默认值：{
路径：'http://static.php.net',
myImages：[{
src:“/www.php.net/images/php.gif”，
标题：“这是一张猴子的照片”}，
{
src:“/www.php.net/images/php.gif”，
标题：“这是一张松鼠的照片”}
]
}
}
$.fn.extend({
随机映像：函数（配置）{
var config=$.extend（{}，$.randomImage.defaults，config）；
返回此值。每个（函数（）{
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）.之后（“”+this.title+”
”）；
var fullPath=config.path+winnerImage；
$（this.attr）({
src:fullPath，
alt:winnerImage
});
});
}
});
})（jQuery）；
$（“#测试”）.randomImage（）；

测试标记：

<img id="test"/>

---

Fiddle:

非常感谢您的帮助，但我可以再问一个问题吗。如何在HTML页面上输出标题？输出图像时，我使用以下代码：但无法打印标题。我加载了另一个JS代码：$（'.shuffle'）.randomImage（{path:'images/'））；非常感谢您的帮助，但我可以再问一个问题吗。如何在HTML页面上输出标题？输出图像时，我使用以下代码：但无法打印标题。我加载了另一个JS，其中包含以下代码：$（'.shuffle'）.randomImage（{path:'images/'）；