Question

我不知道从哪里开始这个想法。我正在使用下面的jQuery来显示每个页面加载的随机图像。我想扩展它以显示一个特定的标题，每个图像显示在不同的div中。

下面的函数以image1.jpg，image2.jpg等格式输出一个随机的image.jpg。我想我需要为每个图像添加一个字幕数组，但是如何引用数组并输出字幕中的图像名称？

<script>
(function($){

    $.randomImage = {
        defaults: {

            path: 'headerimages/',

            myImages: ['image1.jpg', 'image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg' ]         
        }           
    }

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

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

                 return this.each(function() {

                        var imageNames = config.myImages;

                        var imageNamesSize = imageNames.length;

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

                        var displayImage = imageNames[randomNumber];

                        var fullPath = config.path + displayImage;

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

})(jQuery);
</script>

上述函数中的图像由html <img class="randomheader" src="" alt="image">

显示

标题将位于不同的div中，即<div class="caption"></div> 在加载jQuery之前，#caption的CSS可能是display:none。

这是doc ready函数：

<script>
$(document).ready(function(){
 $('.randomheader').randomImage();
});
</script>

Answer 1

这样的事情应该有效：

<script>
(function($){

$.randomImage = {
    defaults: {

        path: 'headerimages/',

        myImages: ['image1.jpg', 'image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg' ],
        myCaptions: ['caption1', 'caption2','caption3','caption4','caption5','caption6' ]          
    }           
}

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

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

             return this.each(function() {

                    var imageNames = config.myImages;

                    var imageCaptions = config.myCaptions;

                    var imageNamesSize = imageNames.length;

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

                    var displayImage = imageNames[randomNumber];

                    var displayCaption = imageCaptions[randomNumber];

                    var fullPath = config.path + displayImage;

                    $(this).attr( { src: fullPath, alt: displayImage });
                    $("#caption").html(displayCaption);
            }); 
        }
});

})(jQuery);
</script>

Answer 2

为$ .randomImage.defaults＆amp;添加一系列字幕。配置对象。
然后使用var caption = config.captions[randomNumber];

进行检索

或

更改myImages: ['image1.jpg', 'image2.jpg','image3.jpg' ...
到myImages: [{image: 'image1.jpg', caption: 'My Caption}, ...

如何将相关标题添加到不同div中的随机图像？

2 个答案: