我正在尝试制作图片滑块。我可以制作滑块。如果您点击<div class="container">
<div class="box">
This is box
</div>
</div>按钮，它会显示下一张图片。但是我在next按钮点击时有一个问题，当我点击时
在上一个按钮上它没有显示上一个图像。
这是我的代码
https://codesandbox.io/s/PNzqkxgPl
previous我使用了以下概念。
import React, { Component } from "react";
import "./listing.css";
const pics = [
"http://mumbaimirror.indiatimes.com/thumb/msid-59722654,width-320,height-385,resizemode-4.cms",
"http://mumbaimirror.indiatimes.com/thumb/msid-59719574,width-320,height-385,resizemode-4.cms",
"https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg",
"https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg"
];
class Hello extends Component {
constructor(props) {
super(props);
const idxStart = 0;
this.state = {
index: idxStart,
next: this.getNextIndex(idxStart),
move: false
};
this.next = this.next.bind(this);
this.pre = this.pre.bind(this);
}
getNextIndex(idx) {
if (idx >= pics.length - 1) {
return 0;
}
return idx + 1;
}
getPreviousIndex(idx) {
if (idx >= 0) {
return pics.length - 1;
}
return idx - 1;
}
next() {
this.setState({
move: true
});
setTimeout(() => {
this.setState({
move: false
});
this.setIndexes(this.getNextIndex(this.state.index));
}, 500);
}
pre() {
this.setState({
move: true
});
setTimeout(() => {
this.setState({
move: false
});
this.setIndexes(this.getPreviousIndex(this.state.index));
}, 500);
}
setIndexes(idx) {
this.setState({
index: idx,
next: this.getNextIndex(idx)
});
}
render() {
const move = this.state.move ? "move" : "";
return (
<div>
<div className="mask">
<div className="pic-wrapper">
<div className={`current pic ${move}`}>
{this.state.index}
<img src={pics[this.state.index]} alt="" />
</div>
<div className={`next pic ${move}`}>
{this.state.next}
<img src={pics[this.state.next]} alt="" />
</div>
</div>
</div>
<button onClick={this.next}>Next</button>
<button onClick={this.pre}>pre</button>
</div>
);
}
}
export default Hello;
，第二张是current。如果我
点击next按钮我将next图片current移至left
并将下一张图片留给0px。
任何更新答案 0 :(得分：0)
getPreviousIndex(idx) {
if (idx >= 0) { // this should be if (idx === 0)
return pics.length - 1;
}
return idx - 1;
}
你还需要一个左侧幻灯片动画：）
HTH。