[英]Return image from React.js function on button click
I am new to React.js and I am trying to create SlideShow....我是 React.js 的新手,我正在尝试创建 SlideShow....
At first when page loades one image will be loaded (first one in array), then when user clicks left on tag
<a>
the function slides()
should return path from global variable .首先,当页面加载时,将加载一个图像(数组中的第一个),然后当用户在
tag
<a>
上单击左键时,function slides()
应该从全局变量返回路径。 Images are imported right and they are in array... whenever page loads only first picture is visible and it's impossible to change between images.图像被正确导入并且它们在数组中......每当页面加载时,只有第一张图片是可见的,并且不可能在图像之间进行更改。
What can I do so I can return path to <img>
tag so right image would appear?我该怎么做才能返回
<img>
标签的路径以便出现正确的图像?
import bg1 from "../images/bg1.jpg";
import bg2 from "../images/bg2.jpg";
import bg3 from "../images/bg3.jpg";
global.images = [
bg1, bg2, bg3
];
function slides(n) {
return(
global.images[n]
);
}
<div className="slideShow">
<img alt="Image" src={slides(0)} className="w-100 h-100"/>
<a href="" className="prev" onClick={slides(1)}>❮</a>
<a href="" className="next" onClick={slides(2)}>❯</a>
</div>
You need some way of tracking the active slide number after you can just change the image src在您可以更改图像 src 之后,您需要一些方法来跟踪活动幻灯片编号
let currentSlide = 0;
let images = ["src1", "src2", "src3"];
function changeSlide(amount) {
currentSlide += amount;
currentSlide = currentSlide < 0 ? images.length : currentSlide;
currentSlide = currentSlide > images.length ? images.length : currentSlide;
let slideShow = document.getElementById("image");
slideShow.src = images[currentSlide];
}
changeSlide(1);
changeSlide(-1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.