wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

取消按钮

This commit is contained in:
al 2024-08-07 18:43:13 +08:00
parent 057c6e5704
commit c518cb9226
1 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/Photos/index.js
View File

@ -79,40 +79,41 @@ export default function Photos({
}, 400); }, 400);
// 添加左右切换按钮 // 添加左右切换按钮
const btns = document.createElement("div"); // const btns = document.createElement("div");
btns.className = "imagesBtnsControllers"; // btns.className = "imagesBtnsControllers";
const btnL = document.createElement("div"); // const btnL = document.createElement("div");
btnL.className = "imagesBtnsControllerLeft"; // btnL.className = "imagesBtnsControllerLeft";
btnL.addEventListener("click", () => { // btnL.addEventListener("click", () => {
if (currentIndex.current > 0) { // if (currentIndex.current > 0) {
currentIndex.current = currentIndex.current - 1; // currentIndex.current = currentIndex.current - 1;
handleShowImages(currentIndex.current, photos, btns,interval); // handleShowImages(currentIndex.current, photos, btns,interval);
if (!currentIndex.current) { // if (!currentIndex.current) {
btnL.style.opacity = 0.5; // btnL.style.opacity = 0.5;
btnR.style.opacity = 1; // btnR.style.opacity = 1;
} else { // } else {
btnR.style.opacity = 1; // btnR.style.opacity = 1;
btnL.style.opacity = 1; // btnL.style.opacity = 1;
} // }
} // }
}); // });
const btnR = document.createElement("div"); // const btnR = document.createElement("div");
btnR.className = "imagesBtnsControllerRight"; // btnR.className = "imagesBtnsControllerRight";
btnR.addEventListener("click", () => { // btnR.addEventListener("click", () => {
if (currentIndex.current < currentPhotos.length - 1) { // if (currentIndex.current < currentPhotos.length - 1) {
currentIndex.current = currentIndex.current + 1; // currentIndex.current = currentIndex.current + 1;
handleShowImages(currentIndex.current, photos, btns,interval); // handleShowImages(currentIndex.current, photos, btns,interval);
if (currentIndex.current == currentPhotos.length - 1) { // if (currentIndex.current == currentPhotos.length - 1) {
btnR.style.opacity = 0.5; // btnR.style.opacity = 0.5;
btnL.style.opacity = 1; // btnL.style.opacity = 1;
} else { // } else {
btnR.style.opacity = 1; // btnR.style.opacity = 1;
btnL.style.opacity = 1; // btnL.style.opacity = 1;
} // }
} // }
}); // });
btns.append(btnL, btnR); // btns.append(btnL, btnR);
handleShowImages(index, photos, btns,interval); // handleShowImages(index, photos, btns,interval);
handleShowImages(index, photos, interval);
// setVisible(true) // setVisible(true)
// console.log(imagesMaskRef.current); // console.log(imagesMaskRef.current);
@ -121,14 +122,14 @@ export default function Photos({
// index // index
// ); // );
}; };
const handleShowImages = (index, photos, btns,interval) => { const handleShowImages = (index, photos, interval) => {
const mediaDom = document.createElement("div"); const mediaDom = document.createElement("div");
mediaDom.style.width = "100vw"; mediaDom.style.width = "100vw";
document.body.appendChild(mediaDom); document.body.appendChild(mediaDom);
mediaDom.className = `${ mediaDom.className = `${
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
}`; }`;
mediaDom.appendChild(btns); // mediaDom.appendChild(btns);
ImageViewer.clear(); ImageViewer.clear();
ImageViewer.Multi.show({ ImageViewer.Multi.show({
images: photos.map((item) => item?.url), images: photos.map((item) => item?.url),