slideshow 相关问题

iPad2 Nav 消失在 jquery Flexslider 幻灯片后面?

嗨,我正在使用一个名为metaslider的wordpress插件,它使用jquery'flexslider'幻灯片效果。 不幸的是,在 ipad 上,它看起来真的很不错,淡入淡出选项使导航下拉菜单变成这样......

回答 1 投票 0

在 iPhone/iPad 故事书应用程序中使用 UIImageViews 作为“页面”?

我是 iPhone 编程新手,好吧,对我来说显而易见的事情对于经验丰富的程序员来说可能看起来很愚蠢。我在 Youtube 上做了一些“切换视图”教程,基本上,它们似乎非常适合

回答 2 投票 0

基本的 jQuery 滑块无法正确滑动图像

我遇到的问题是它只快速显示 2-3 张图像,然后停止在图像之间滑动,它只停在一张图片上。 超文本标记语言 jQuery("#</desc> <question vote="0"> <p>我遇到的问题是它只快速显示 2-3 张图像,然后停止在图像之间滑动,它只停在一张图片上。</p> <p>HTML</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; jQuery(&#34;#slideshow &gt; div:gt(0)&#34;).hide(); setInterval(function() { jQuery(&#39;#slideshow &gt; div:first&#39;) .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo(&#39;#slideshow&#39;); }, 3000); &lt;/script&gt; &lt;LINK REL=StyleSheet HREF=&#34;slideshow.css&#34; TYPE=&#34;text/css&#34;&gt; &lt;script src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;body&gt; &lt;div id=&#34;slideshow&#34; style=&#34;align:center;&#34;&gt; &lt;div&gt; &lt;img src=&#34;htc-touch-diamond-versus-iphone-3g.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone_ipad.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone-3gs.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone3gs_3up.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone-4g-mockup-von-rino0815.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone-water1.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;Mobiles-iPhone-Repair.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;steve-jobs-holding-iphone.jpeg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone-3g-preview.png&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;div&gt; &lt;img src=&#34;iphone-sparks.png&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </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 &gt; div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } </code></pre> <h2>编辑</h2> <p>我将 jQuery 代码放在外部 JS 文件中,我在 html 中引用该文件,如下所示</p> <pre><code>&lt;LINK REL=StyleSheet HREF=&#34;slideshow.css&#34; TYPE=&#34;text/css&#34;&gt; &lt;script src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;SCRIPT LANGUAGE=&#34;JavaScript&#34; src=&#34;slideshow.js&#34;&gt; &lt;/SCRIPT&gt; &lt;div id=&#34;slideshow&#34; style=&#34;align:center;&#34;&gt; &lt;div&gt; &lt;img src=&#34;htc-touch-diamond-versus-iphone-3g.jpg&#34; width=&#34;800px&#34; height=&#34;400px&#34;&gt; &lt;/div&gt; </code></pre> <p>现在仍然无法工作并显示此错误...</p> <blockquote> <p><pre><code>(&#34;#slideshow &gt; div:gt(0)&#34;).hide()</code></pre>不存在</p> </blockquote> <p>这是我的新 JS 文件:</p> <pre><code>$(document).ready(function(){ (&#34;#slideshow &gt; div:gt(0)&#34;).hide(); setInterval(function() { jQuery(&#39;#slideshow &gt; div:first&#39;) .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo(&#39;#slideshow&#39;); }, 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(){ $(&#34;#slideshow &gt; div:gt(0)&#34;).hide(); setInterval(function() { $(&#34;#slideshow &gt; div:first&#34;) .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo(&#34;#slideshow&#34;); },3000); }); </code></pre> </answer> <answer tick="false" vote="0"> <p>发生这种情况是因为您没有使用回调。每个语句都是异步执行的。将您的代码放在回调中</p> </answer> </body></html>

回答 0 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

JS/jQuery 中的缩放幻灯片

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

回答 3 投票 0

滑块不会更改 Blazor 中的值

我试图在 Blazor 中将滑块设置为预算参数,但是当移动滑块时预算值不会改变。为什么会这样,我该如何解决它? 这是组件代码 我是...

回答 2 投票 0

一页上的多个幻灯片使第一个幻灯片不再起作用

首先,我知道这个问题是在答案无法解决我的问题之前就被问到的,所以我想再问一遍: 我使用了“W3school”中的幻灯片代码,它提供了一个不错的动画......

回答 3 投票 0

Javascript 幻灯片对齐

美好的一天。 首先,我在 Javascript 方面是个菜鸟,所以,我很感谢您能够提供的任何帮助。 我的问题应该不难解决。 我只是想努力...

回答 1 投票 0

Angular 问题中的轮播

我正在尝试在 Angular 中创建一个简单的轮播,但交互部分不起作用,我没有弄清楚问题所在,有人可以帮助我吗? 单击按钮时,它们不会更改差异...

回答 1 投票 0

不断出现 Uncaught ReferenceError: nextSlide is not Defined 和 Uncaught ReferenceError: prevSlide is not Defined

我正在尝试设置一个简单的 4 幻灯片幻灯片,但似乎无法定义幻灯片以及“下一张”和“上一张”按钮每次都起作用。 我是 JavaScript 新手。好像不想让我发帖

回答 1 投票 0

如何在flutter中创建自定义重叠轮播滑块?

我想做一个如下图所示的滑块: 我检查了几乎所有 pub.dev 软件包。 特别是包overlaped_carousel和carousel_slider。 包overlapped_carousel的问题是......

回答 1 投票 0

有没有办法删除页面导航链接上的背景颜色而不将其从幻灯片小部件中删除?

我附上了一张屏幕截图,可以更好地解释我想要实现的目标。我无法弄清楚如何删除网站页面导航中显示的背景颜色...

回答 1 投票 0

Debian LITE 流畅幻灯片放映

我有兴趣将我的 Raspberry Pi 3 用于广告目的。我想创建一个可以显示视频和图像的幻灯片,并且我希望能够迭代所有媒体

回答 1 投票 0

如何将 PowerPoint、PDF 和 Word 文件转换为不同的幻灯片(如 SlideShare)?

我希望能够显示 PowerPoint 幻灯片。 我应该如何实施这个? 像 Slideshare 这样的网站实际上是如何实现这一点的? 当您上传 PowerPoint、Word 或 PDF 文件时,每个...

回答 2 投票 0

如何对序列中的每张幻灯片应用相同的 FFMPEG 幻灯片过渡?

我有一个 ffmpeg 命令可以从一系列 N x JPEG 幻灯片创建 MP4 视频。也就是说,我不知道序列中有多少张幻灯片,它只是 JPEG-s 的目录。 我愿意...

回答 1 投票 0

如何在 bootstrap carousel 上获取容器 div 以平滑调整大小而不是“跳转”到新大小

当您在引导轮播中浏览各种大小/高度的图像或视频资源时,我试图让容器 div 平滑地调整大小。 现在它“跳跃”以调整大小到n...

回答 1 投票 0

React/Tailwind 幻灯片高度问题

我是 Web 开发新手,正在学习使用 React 和 Tailwind。 我正在尝试按以下方式制作“关于我们”部分。 有两个组件:滑动...

回答 1 投票 0

幻灯片放映 - 图像未显示(HTML 和 CSS)[已关闭]

我正在尝试在我的网站中创建幻灯片,但图像未显示。出现幻灯片的按钮和箭头,但不出现图像。 HTML代码 我正在尝试在我的网站中创建幻灯片,但图像未显示。出现幻灯片的按钮和箭头,但不出现图像。 HTML 代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="app.css"> <meta charset="utf-8"> </head> <body> </div> <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides"> <div class="numbertext">1 / 3</div> <img src="etat.jpg"> <div class="text">Les aides</div> </div> <div class="mySlides"> <div class="numbertext">2 / 3</div> <img src="tips.jpeg"> <div class="text">Les Tips</div> </div> <div class="mySlides"> <div class="numbertext">3 / 3</div> <img src="bonsplans.jpg"> <div class="text">Les bons plans</div> </div> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </body> </html> CSS代码 /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Hide the images by default */ .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } 我使用了 W3schools 的代码。它并不打算成为自动幻灯片,因此我没有包含 JavaScript。我想要的结果是一个简单的轮播,就像 W3schools 网站上展示的那样。 我确实验证了图像的名称和 html 标签的名称,以检查它们是否正确。不知道其余部分的 CSS 代码是否会干扰幻灯片。 尝试将所有图像添加到单独的文件夹中并在项目中使用它们并确保路径正确, 例如,如果您有一个公共文件夹,并且里面有资产文件夹,其中包含所有图像,则像 一样导入它们

回答 1 投票 0

如何为缩略图 Woocommerce 创建滑块

我想制作缩略图滑块, 我留下链接作为示例: http://flexslider.woothemes.com/thumbnail-slider.html 我搜索了很多但找不到解决方案,有人可以帮忙吗? 这是...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.