取消按钮

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

View File

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