slideshow 相关问题

我遇到的问题是它只快速显示 2-3 张图像，然后停止在图像之间滑动，它只停在一张图片上。超文本标记语言 jQuery("#</desc> <question vote="0"> <p>我遇到的问题是它只快速显示 2-3 张图像，然后停止在图像之间滑动，它只停在一张图片上。</p> <p>HTML</p> <pre><code><script type="text/javascript"> jQuery("#slideshow > div:gt(0)").hide(); setInterval(function() { jQuery('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000); </script> <LINK REL=StyleSheet HREF="slideshow.css" TYPE="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <body> <div id="slideshow" style="align:center;"> <div> <img src="htc-touch-diamond-versus-iphone-3g.jpg" width="800px" height="400px"> </div> <div> <img src="iphone_ipad.jpg" width="800px" height="400px"> </div> <div> <img src="iphone-3gs.jpg" width="800px" height="400px"> </div> <div> <img src="iphone3gs_3up.jpg" width="800px" height="400px"> </div> <div> <img src="iphone-4g-mockup-von-rino0815.jpg" width="800px" height="400px"> </div> <div> <img src="iphone-water1.jpg" width="800px" height="400px"> </div> <div> <img src="Mobiles-iPhone-Repair.jpg" width="800px" height="400px"> </div> <div> <img src="steve-jobs-holding-iphone.jpeg" width="800px" height="400px"> </div> <div> <img src="iphone-3g-preview.png" width="800px" height="400px"> </div> <div> <img src="iphone-sparks.png" width="800px" height="400px"> </div> </div> </body> </code></pre> <p>幻灯片.css</p> <pre><code>#slideshow { margin: 50px auto; position: relative; width: 800px; height: 400px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } </code></pre> <h2>编辑</h2> <p>我将 jQuery 代码放在外部 JS 文件中，我在 html 中引用该文件，如下所示</p> <pre><code><LINK REL=StyleSheet HREF="slideshow.css" TYPE="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript" src="slideshow.js"> </SCRIPT> <div id="slideshow" style="align:center;"> <div> <img src="htc-touch-diamond-versus-iphone-3g.jpg" width="800px" height="400px"> </div> </code></pre> <p>现在仍然无法工作并显示此错误...</p> <blockquote> <p><pre><code>("#slideshow > div:gt(0)").hide()</code></pre>不存在</p> </blockquote> <p>这是我的新 JS 文件：</p> <pre><code>$(document).ready(function(){ ("#slideshow > div:gt(0)").hide(); setInterval(function() { jQuery('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000); }); </code></pre> <p>有时它还会给出 $ 的引用错误，表示“$未定义”</p> <h2>编辑2</h2> <p>我已将所有代码粘贴到此处。这 3 个文件分别是 HTML、CSS 和 js。</p> <p>我哪里错了？哪些语句需要放在什么后面？</p> </question> <answer tick="true" vote="1"> <p>我解决了这个问题。这是带有js文件的。这是代码。 </p> <pre><code>$(document).ready(function(){ $("#slideshow > div:gt(0)").hide(); setInterval(function() { $("#slideshow > div:first") .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo("#slideshow"); },3000); }); </code></pre> </answer> <answer tick="false" vote="0"> <p>发生这种情况是因为您没有使用回调。每个语句都是异步执行的。将您的代码放在回调中</p> </answer> </body></html>

jquery html css slideshow

回答 0 投票 0

反应：淡入淡出幻灯片不起作用。怎么解决？

我在尝试实现淡入淡出幻灯片时遇到错误。所需的图像是：所需的代码是：主页.js 从'react'导入React，{Component}；从 '../Header/Hea... 导入标题

javascript reactjs frontend slideshow

回答 2 投票 0

使用多个 javascript 轮播时第一张幻灯片不显示

无法弄清楚为什么我的第一张幻灯片在运行多个轮播时没有显示。我对编码知之甚少，并且对我发现的一些内容进行了缝合/修改，大部分......

javascript html css carousel slideshow

回答 1 投票 0

JS/jQuery 中的缩放幻灯片

在当前的项目中，我们希望在起始页上播放幻灯片，稳定地循环浏览图像。到目前为止，一切都很好。但客户要求在过渡之间缓慢缩放图像...