Question

我正尝试让我的背景图像幻灯片显示，以根据当前显示的图像显示不同的文本。当单击“ buttonR”时，changeText是我要更改的内容。

var images = [
    'http://i67.tinypic.com/1zlazia.jpg', //tesla
    'http://i67.tinypic.com/2hcq2xy.jpg', //galileo
    'http://placehold.it/500x320/7f0',
    'http://placehold.it/500x320/0f7'
  ],
  i = 0,
  n = images.length;

$("#buttonR").click(function() {
  $(".changable").css({
    backgroundImage: "url(" + images[i++ % n] + ")"
  });
});

.parallax {
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contentBox {
  text-align: center;
  color: white;
  padding: 100px;
  font-size: 140%;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="parallax changable">
  <div class="module">
    <div class="moduleContent contentBox">
      <p id="changeText">
        <!-- this is the text for the first image that will show on load -->
        Nikola Tesla
      </p>
    </div>
  </div>
  <div id="buttonR" style="width:50px; background-color:white;">&rarr;</div>
</section>

当用户单击按钮时，我已经使用JavaScript和J Query来更改背景图像，效果很好，我想知道如何更改图像，文本也是如此。

Answer 1

为什么不将您的function count(queryCommand) { var response = getContext().getResponse(); var collection = getContext().getCollection(); var count = 0; query(queryCommand); function query(queryCommand, continuation){ var requestOptions = { continuation: continuation }; var isAccepted = collection.queryDocuments( collection.getSelfLink(), queryCommand, requestOptions, function (err, feed, responseOptions) { if (err) { throw err; } // Scan results if (feed) { count+=feed.length; } if (responseOptions.continuation) { // Continue the query query(queryCommand, responseOptions.continuation) } else { // Return the count in the response response.setBody(count); } }); if (!isAccepted) throw new Error('The query was not accepted by the server.'); } }数组转换为对象数组？

images

然后，您可以让click函数引用对象属性：

var images = [
    { image: 'http://i67.tinypic.com/1zlazia.jpg', name: 'Nikola Tesla' },
    { image: 'http://i67.tinypic.com/2hcq2xy.jpg', name: 'Galileo' }
];

多次更改段落以匹配幻灯片中更改的图像

1 个答案: