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 for#captionはおそらくdisplay:nonejQuery が読み込まれるまでです。

これはドキュメント準備機能です:

<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 に答える