javascript旋转木马类似于呈现画廊

问题描述 投票:0回答:1

let currentContainerIndex = 0; // Index du container actuel const containers = document.querySelectorAll("#additionalContainers .container"); function toggleContainers() { if (currentContainerIndex < containers.length) { containers[currentContainerIndex].classList.remove("hidden"); currentContainerIndex++; } else { currentContainerIndex = 0; // Réinitialiser l'index containers.forEach(container => container.classList.add("hidden")); // Cacher tous les containers } }

.container { /*Container du texte et de l'image*/ display: flex; justify-content: space-between; margin: 20px auto; width: 85%; max-width: 1200px; gap: 20px; background-color: #d2d4e7; padding: 10px; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .container:hover { box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2); } .sectiontext, .sectionimage { /*Sections*/ flex: 1; background-color: #edefff; padding: 20px; box-sizing: border-box; border: 2px solid #464e73; border-radius: 10px; transition: all 0.3s ease-in-out; } .sectiontext:hover, .sectionimage:hover { transform: scale(1.02); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); border-color: #6a82e8; } .sectionimage img { /*Image*/ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .hidden { display: none; } .container { margin-bottom: 20px; } .arrow { cursor: pointer; font-size: 24px; margin: 10px 0; }

<div class="sectiontext"> <h2>Voyager à Londres pendant les vacances de Noël</h2> <p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p> <p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p> <p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p> <p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p> <p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p> <p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p> </div> <div class="sectionimage"> <img src="images/londoneye.jpg" alt="Image du London Eye de nuit" /> </div> </div> <div class="arrow" onclick="toggleContainers()">&#x2192; Voir plus</div> <div id="additionalContainers" class="hidden"> <div class="container"> <div class="sectiontext"> <h2>Les marchés de Noël</h2> <p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p> </div> <div class="sectionimage"> <img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" /> </div> </div> <div class="container"> <div class="sectiontext"> <h2>Les spectacles de Noël</h2> <p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p> </div> <div class="sectionimage"> <img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" /> </div> </div> </div> </main>
我试图不触摸CSS的身体,因为我在同一样式表中还有其他9页,所以我猜它会改变。
如果您需要其他细节问我
如果您向我解释该怎么办,那将很棒!
    

这样的东西,也许?

这个想法是所有容器均处于相同的...含容器的容器中,因此它们易于迭代,并且易于根据当前选择的索引隐藏(并且使用相同的功能来初始化隐藏状态,并在可见索引更改时进行更新)。

javascript html css carousel
1个回答
0
投票

.container { /*Container du texte et de l'image*/ display: flex; justify-content: space-between; margin: 20px auto; width: 85%; max-width: 1200px; gap: 20px; background-color: #d2d4e7; padding: 10px; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .container:hover { box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2); } .sectiontext, .sectionimage { /*Sections*/ flex: 1; background-color: #edefff; padding: 20px; box-sizing: border-box; border: 2px solid #464e73; border-radius: 10px; transition: all 0.3s ease-in-out; } .sectiontext:hover, .sectionimage:hover { transform: scale(1.02); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); border-color: #6a82e8; } .sectionimage img { /*Image*/ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .hidden { display: none; } .container { margin-bottom: 20px; } .arrow { cursor: pointer; font-size: 24px; margin: 10px 0; }

<div id="containers"> <div class="container"> <div class="sectiontext"> <h2>Voyager à Londres pendant les vacances de Noël</h2> <p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p> <p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p> <p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p> <p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p> <p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p> <p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p> </div> <div class="sectionimage"> <img src="images/londoneye.jpg" alt="Image du London Eye de nuit" /> </div> </div> <div class="container"> <div class="sectiontext"> <h2>Les marchés de Noël</h2> <p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p> </div> <div class="sectionimage"> <img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" /> </div> </div> <div class="container"> <div class="sectiontext"> <h2>Les spectacles de Noël</h2> <p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p> </div> <div class="sectionimage"> <img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" /> </div> </div> </div> <div class="arrow" onclick="toggleContainers()">&#x2192; Voir plus</div>

	
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.