时间戳

首页 > 解决方案 > 在页面加载和按钮单击时在 React 幻灯片组件中显示具有匹配标题的随机图像

javascript - 在页面加载和按钮单击时在 React 幻灯片组件中显示具有匹配标题的随机图像

问题描述

我正在尝试构建一个幻灯片，当页面加载或单击幻灯片中的下一个按钮时，它会显示带有相关标题的随机图像。我在 React 组件中执行此操作。我制作了一组对象，每个对象都有图像 URL 和标题。我正在尝试编写我需要选择随机图像并能够同时显示图像和标题的函数。这是我到目前为止所拥有的。我不确定从哪里开始。谢谢你，我真的很感激！

import React, { Component } from "react";
import "../styles/slideshow.css";

export default class Slideshow extends Component {
  images = [
    {
      headline: "Title 1",
      link:
        "www.example1.com"
    },
    {
      headline: "Title 2",
      link:
        "www.example2.com"
    },
    {
      headline: "Title 3",
      link:
        "www.example3.com"
    }
  ];

  displayRandomImage = () => {
    let index = Math.floor(Math.random() * 3);
  };

  render() {
    return (
      <div>
        <div id="slideshow" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src={} alt="First slide" />
            </div>
          </div>
          <a
            class="carousel-control-prev"
            href="#carouselExampleControls"
            role="button"
            data-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a
            class="carousel-control-next"
            href="#carouselExampleControls"
            role="button"
            data-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    );
  }
}

标签： javascripthtmlcssreactjs

解决方案

import React, { Component } from "react";
import "../styles/slideshow.css";

export default class Slideshow extends Component {
  constructor() {
    this.state = {
      imgIndex: null
    };
  }

  images = [
    {
      headline: "Title 1",
      link: "www.example1.com"
    },
    {
      headline: "Title 2",
      link: "www.example2.com"
    },
    {
      headline: "Title 3",
      link: "www.example3.com"
    }
  ];

  componentWillMount() {
    this.displayRandomImage();
  }

  displayRandomImage = () => {
    this.setState({
      imgIndex: Math.floor(Math.random() * 3)
    });
  };

  render() {
    return (
      <div>
        <div id="slideshow" className="carousel slide" data-ride="carousel">
          <div className="carousel-inner">
            <div className="carousel-item active">
                <div className='carousel-image_title'>{this.images[imgIndex].headline}</div>
              <img
                className="d-block"
                src={this.images[imgIndex].link}
                alt="First slide"
              />
            </div>
          </div>
          <a
            className="carousel-control-prev"
            href="#carouselExampleControls"
            role="button"
            data-slide="prev"
          >
            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
            <span className="sr-only">Previous</span>
          </a>
          <a
            className="carousel-control-next"
            href="#carouselExampleControls"
            role="button"
            data-slide="next"
          >
            <span className="carousel-control-next-icon" aria-hidden="true"></span>
            <span className="sr-only">Next</span>
          </a>
        </div>
      </div>
    );
  }
}

    enter code here

推荐阅读