Javascript 以可视性从零开始反应转盘逻辑

旋转木马的逻辑或算法是什么？我已经完成了每个显示1个项目的研究，但在我的情况下，我需要显示3个项目，当我单击下一个项目时，我希望第一个项目被隐藏，第四个项目出现

<div className="App">
      <div className="Container">
        {items.map((item, i) => (
          <div className={`item ${i < lastIndex ? "visible" : "hidden"}`}>
            {item.name}
          </div>
        ))}
      </div>
      <div className="prev">{"<"}</div>
      <div className="next">{">"}</div>
    </div>

{items.map（（item，i）=>(
{item.name}
))}
{""}

---

我希望这对你有帮助

export default function App() {
  const [startIndex, setStartIndex] = useState(1);
  const [lastIndex, setLastIndex] = useState(3);

  return (
    <div className="App">
      <div className="Container">
        {
          items.map((item, i) => {
            if (i >= startIndex - 1 && i <= lastIndex)
              return (
                <div className={`item ${i < lastIndex ? "visible" : "hidden"}`} key={i}>
                  {item.name}
                </div>
              )
          })
        }
      </div>
      <div className="prev"
        onClick={() => {
          setStartIndex(startIndex - 1)
          setLastIndex(lastIndex - 1)
        }}
      >{"<"}</div>
      <div className="next"
        onClick={() => {
          setStartIndex(startIndex + 1)
          setLastIndex(lastIndex + 1)
        }}
      >
        {">"}
      </div>
    </div>
  );
}

导出默认函数App（）{
常数[startIndex，setStartIndex]=useState（1）；
const[lastIndex，setLastIndex]=useState（3）；
返回(
{
items.map（（item，i）=>{
如果（i>=startIndex-1&&i{'}
);
}

您必须跟踪应该显示的第一个和最后一个索引。超出它们的任何内容都可以跳过

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

const items = [
  {
    name: "box 1"
  },
  {
    name: "box 2"
  },
  {
    name: "box 3"
  },
  {
    name: "box 4"
  },
  {
    name: "box 5"
  }
];

export default function App() {
  const [firstIndex, setFirstIndex] = useState(0);
  const [lastIndex, setLastIndex] = useState(3);

  return (
    <div className="App">
      {/* <h1>{lastIndex}</h1> */}
      <div className="Container">
        {items.map((item, i) => {
          if (i >= firstIndex && i < lastIndex) {
            return (
              <div key={item.name} className={"visible"}>
                {item.name}
              </div>
            );
          } else {
            return null;
          }
        })}
      </div>
      <div
        className="prev"
        onClick={() => {
          if (firstIndex > 0) {
            setFirstIndex(firstIndex - 1);
            setLastIndex(lastIndex - 1);
          }
        }}
      >
        {"<"}
      </div>
      <div
        className="next"
        onClick={() => {
          if (lastIndex < items.length) {
            setFirstIndex(firstIndex + 1);
            setLastIndex(lastIndex + 1);
          }
        }}
      >
        {">"}
      </div>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
常数项=[
{
名称：“方框1”
},
{
名称：“方框2”
},
{
名称：“方框3”
},
{
名称：“方框4”
},
{
名称：“方框5”
}
];
导出默认函数App（）{
常量[firstIndex，setFirstIndex]=useState（0）；
const[lastIndex，setLastIndex]=useState（3）；
返回(
{/*{lastIndex}*/}
{items.map（（item，i）=>{
如果（i>=firstIndex&&i0）{
setFirstIndex（firstIndex-1）；
setLastIndex（lastIndex-1）；
}
}}
>
{""}
);
}

---

编辑更新了代码以防止第一个和最后一个索引超出项目长度的界限

hmm需要防止单击最后一个索引是否结束。更新了代码示例以防止第一个索引低于0，最后一个索引超过项目。长度非常感谢。如果我想根据第一个/最后一个索引？我需要做计算吗？你可以做条件渲染。看到我在onClick中放置的条件了吗？你可以从onClick中取出它们，并用条件渲染包含整个div。我更新了codesandbox以显示它很酷，但如果不使用不透明度，就不能进行转换，不是吗？它不会滑动。。