合并 2 个 javascript/jquery 随机横幅图像/文本函数彼此对应

Consolidating 2 javascript/jquery random banner image/text functions correspond to each other?

本文关键字：文本 函数 图像 javascript jquery 合并 随机      更新时间：2023-09-26

大家好(第一篇文章在这里(，我知道有类似的问题，我发现了关于使用 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 -->

提前谢谢。

如果目标是让相应的引号与图像一起使用，例如图像一/引用一，图像二/引用二，请尝试以下操作：

$(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] );
});
相关文章：