javascript - 合并 2 个 javascript/jquery 随机横幅图像/文本函数相互对应？

Question

大家好(这里是第一篇文章)，我知道有类似的问题，我发现了一些关于使用 jquery/javascript 随机化横幅图像和文本的好文章。我现在的问题是(非常简单)一种结合这些功能同时保持 CSS 属性(响应式设计)完好无损的方法。如果我可以更具体一些，请告诉我。

下面是函数的两段代码:

<!-- START Rotating Image jQuery -->   
  <script type="text/javascript">
   $(function() {
    var images = ['ppl_1.png', 'ppl_2.png', 'ppl_3.png', 'ppl_4.png', 'ppl_5.png', 'ppl_6.png'];
    $('.intro-header').css({'background': 'url(images/' + images[Math.floor(Math.random() *     images.length)] + ') no-repeat center center' , 'background-size': 'cover'});
   });
  </script> 
  <!-- END Rotating Image jQuery -->  

  <!-- START Rotating Intro Message jQuery -->   
  <script type="text/javascript">
  $(document).ready(function() {
    var quotes = new Array("pplmsg1", "pplmsg2", "pplmsg3", "pplmsg4", "pplmsg5", "pplmsg6"),
    randno = quotes[Math.floor( Math.random() * quotes.length )];
    $('.intro-message > h1').text( randno );
});
  </script> 
  <!-- END Rotating Intro Message jQuery -->   

提前致谢。

Answer 1

如果目标是让相应的引用与图片一起出现，比如图片一/引用一，图片二/引用二，试试这个:

$(function() {
    var images = ['ppl_1.png', 'ppl_2.png', 'ppl_3.png', 'ppl_4.png', 'ppl_5.png', 'ppl_6.png'],
        quotes = ["pplmsg1", "pplmsg2", "pplmsg3", "pplmsg4", "pplmsg5", "pplmsg6"],
        index = Math.floor(Math.random() *     images.length);

    $('.intro-header').css({'background': 'url(images/' + images[index] + ') no-repeat center center' , 'background-size': 'cover'});
    $('.intro-message > h1').text( quotes[index] );
});