slideshow 相关问题

在幻灯片上使用上一个下一个按钮时重置计时器

我有一个图像幻灯片，它每 5 秒自动更改一次（ autoslide() ），所以当我按下下一个/后退按钮之一时，倒计时继续。我想要如何表现：当其中之一......

javascript slideshow

回答 1 投票 0

SlidesJS 隐藏分页

我正在使用 Slidesjs 在我的网站上使用简单的滚动条。但是，我无法隐藏显示 1 和 2 要点的分页。我尝试过将其隐藏在 CSS 和 Jquery.hide 函数中...

javascript jquery slideshow

回答 1 投票 0

carouFredSel 淡入时中断

我使用 carouFredSel 插件构建了一个图像滑块，并且在单个图像轮播中一切正常，但当我继续构建我的网站时，我遇到了一些问题。第一次来...

javascript jquery slideshow carousel caroufredsel

回答 1 投票 0

在 MS Word 2307 中制作图片库

我想制作一个简单的幻灯片或其他照片库（你知道，几张图像堆叠在一个地方并在单击时在它们之间切换），但我认为使用“标准”选项我...

image gallery slideshow

回答 1 投票 0

如何制作幻灯片动画 HTML CSS JS

我使用 HTML、CSS 和 JS 为我的页面创建了幻灯片。代码如下：索引.html 我使用 HTML、CSS 和 JS 为我的页面创建了幻灯片。代码如下： index.html <div class="slideshow"> <div class="image__container"> <img src="/static/images/indoor2.jpg" alt="Indoor"> </div> <div class="image__container"> <img src="/static/images/indoor3.jpg" alt="Indoor"> </div> <div class="image__container"> <img src="/static/images/indoor4.jpg" alt="Indoor"> </div> </div> 样式.css .slideshow { position: relative; animation: fadeInFromLeft 1.5s ease; } .image__container img { height: 80vh; width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } 脚本.js let slideIndex = 0; showSlides(); function showSlides() { const slides = document.getElementsByClassName('image__container'); // Hide all images for (let i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; } // Show curr image slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = 'block'; // Repeat after 2 sec (2000ms) setTimeout(showSlides, 3000); } 幻灯片效果完美，但我想添加一些过渡，例如淡入。我试过这样：样式.css .slideshow { position: relative; animation: fadeInFromLeft 1.5s ease; } .image__container img { animation: fadeInSlideshow 1s ease-in-out; height: 80vh; width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } @keyframes fadeInSlideshow { from { opacity: 0.5; } to { opacity: 1; } } 但是，即使它有效，图像之间的过渡也不是最好的。在动画和过渡领域还不是很实用，我想知道是否有人可以给我一些如何继续的建议，以便了解将来如何解决这个“问题”。我感谢任何可以帮助我的回复。提前谢谢您。 let slideIndex = 0; showSlides(); function showSlides() { const slides = document.getElementsByClassName('image__container'); for (let i = 0; i < slides.length; i++) { slides[i].querySelector('img').classList.remove('active'); } // Show curr image slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].querySelector('img').classList.add('active'); // Repeat after 3 sec (3000ms) setTimeout(showSlides, 3000); } .slideshow { position: relative; animation: fadeInFromLeft 1.5s ease; } .image__container img { height: 80vh; width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 1s ease-in-out; } .image__container img.active { opacity: 1; } <div class="slideshow"> <div class="image__container"> <img src="https://avatars.githubusercontent.com/u/12371363?v=4" alt="Indoor"> </div> <div class="image__container"> <img src="https://avatars.githubusercontent.com/u/1493671?v=4" alt="Indoor"> </div> <div class="image__container"> <img src=https://avatars.githubusercontent.com/u/11975561?v=4" alt="Indoor"> </div> </div> 如果有效，请尝试一下。请在 HTML 中使用正确的图像 URL。我使用的是互联网资源。

javascript html css css-transitions slideshow

回答 1 投票 0

尝试将更新的幻灯片添加到我的摄影作品集网站，但遇到问题

我曾经有一个幻灯片放映只能通过单击图像来前进，但是使幻灯片放映独立于站点，通过单击页面的左侧或右侧来前进和后退。

javascript html css slideshow

回答 0 投票 0

用于图像幻灯片放映+幻灯片放映的隐形前进和后退按钮

我正在尝试为我的幻灯片创建前进和后退按钮，这些按钮是不可见的并且跨越图像到页面边缘（参见 [ 我能够让幻灯片自行工作，但现在......

javascript css responsive slideshow

回答 0 投票 0

尝试为图像幻灯片制作不可见的前进和后退按钮

我希望幻灯片放映按钮如何运行的屏幕截图：我正在尝试为我的幻灯片创建前进和后退按钮，这些按钮是不可见的并且跨越图像到页面边缘。然而我