slideshow 相关问题

jQuery - 循环帮助

我正在寻求一些有关使用 jQuery 循环库的帮助。我正在参加初学者演示，并且我完成了绝对的第一个演示。这是页面上的第二个。 <p>我正在寻求有关使用 jQuery 的 <a href="http://malsup.com/jquery/cycle/" rel="nofollow noreferrer">cycle</a> 库的帮助。我正在参加“初学者”演示，并且我完成了绝对的第一个演示。这是页面上的第二个。<a href="http://malsup.com/jquery/cycle/begin.html" rel="nofollow noreferrer"> </a><code><script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="jquery.cycle.all.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.pics').cycle({ fx: 'scrollDown', speed: 300, timeout: 2000 }); </script> </code></p> <pre>我的 CSS 与页面上的 CSS 相同，这就是为什么我将 .pics 放在引号中。</pre> <p> </p> </question>我猜测这对你不起作用。您需要平衡大括号和圆括号。<answer tick="false" vote="2"> <p>试试这个：</p> <p><code>$(document).ready(function() { $('.pics').cycle({ fx: 'scrollDown', speed: 300, timeout: 2000 }); }); </code></p> <pre> </pre> </answer>可以重新提出这个问题吗？它工作正常，但我在设计它时遇到了困难。我试图让图像向左浮动，文本向右环绕，就像在 <answer tick="false" vote="0">demo<p>（非图像内容）中一样。<a href="http://malsup.com/jquery/cycle/int2.html" rel="nofollow noreferrer"> </a>我的脚本是：</p> <p><code><script type="text/javascript"> $(document).ready(function() { $('.text') .before('<div id="slidenav">') .cycle({ fx: 'fade', speed: 'slow', timeout: 6000, pager: '#slidenav', pause: 1 }); }); </script> </code></p> <pre>...</pre> <p><code><div id="featured"> <div class="text"> <txp:article_custom form="slidetext" section="slide" limit="5" /> </div> </div> </code></p> <pre>我的 CSS 是：</pre> <p><code>.text { width: 600px; height: 200px; border: 1px solid #ddd; background-color: green; } .text div { width: 500px; height: 200px; padding: 15px; color: #333; text-align: left; font-size: 16px; background-color:red; } .text div img {width: 200px; height: 200px; padding: 3px; background: orange } .text div p{ background-color:black;} </code></p> <pre>抱歉，这里没有浮动属性，因为它们都不起作用。我从 jQuery 循环演示页面中获取了该 CSS。</pre> <p>结果是</p> <p></p>http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg<p><a href="http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg" rel="nofollow noreferrer"> </a></p>http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg<p><a href="http://img147.imageshack.us/img147/4434/jqueryhelpdl5.jpg" rel="nofollow noreferrer"> </a> </p></answer>

jquery slideshow cycle

回答 0 投票 0

如何向我的 cb 幻灯片添加更多图像？

幻灯片适用于图像 1-6（原始代码），但我需要显示 13 张图像。这是我所做的，并认为它会起作用，但事实并非如此。它仍然只播放前 6 个图像。本来...

css slideshow

回答 2 投票 0

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

我有一个图像幻灯片，它每 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

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

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