0

我不知道从哪里开始这个想法。我正在使用下面的 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> CSS#caption可能会display:none在 jQuery 加载之前出现。

这是文档就绪功能：

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

2 回答 2

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>
于 2013-04-07T04:54:11.767 回答
0

将一组标题添加到 $.randomImage.defaults & config 对象。
然后使用检索var caption = config.captions[randomNumber];

或者

把myImages: ['image1.jpg', 'image2.jpg','image3.jpg'……
改成myImages: [{image: 'image1.jpg', caption: 'My Caption},……

于 2013-04-07T04:51:40.943 回答