jQuery/JS：随机图像与文字？如何添加文本？

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。

谢谢 真诚 - Mestika

Answer 1

添加另一个阵列

(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 2

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

首先，你需要改变的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 */ 
    } 
}); 

Answer 3

在这里你去：

(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/