- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
首先,我刚刚开始学习 HTML、CSS 和 JS,目前正在自学!(所以我是新手!)
现在,我使用 jQuery 制作了一个全屏图像渐变器,但遇到了 2 个小问题。
1) 推子显示 (img 1) 然后淡化为 (img 1) 再次 然后淡化为 (img 2) (图片3) (img 4) 并返回 (img 1)。但我正在寻找一个简单的 (img 1) > (img 2) > (img 3) > (img 4) > (img 1) 旋转。
2) 当 (img 1) 淡入 (img 2) 时,会出现一个短暂但非常明亮的白色闪光,我希望将其更改为更微妙的黑色闪光,甚至将其更改为下一个(img) 马上!
感谢阅读我希望你能理解我我无法解释得更清楚,因为我还没有真正的经验。
这是我使用的代码!
$(document).ready(function functionName() {
var count = 0;
var images = ["slider1","slider2","slider3","slider4"];
var image = $(".fader");
image.css("background-image","url("+images[count]+")");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},10000);
});
最佳答案
第一个问题是您实际上加载了第一张图片两次。您将 count
设置为 0
并设置背景图像。然后在你的循环中,发生的第一件事是它再次将背景图像设置为图像 0
,然后将 count
递增到 1
(您正在使用后增量运算符)。如果要先自增,请使用预自增运算符 (++count
)。但是您需要小心,因为这会改变您的检查以查看何时 count
超出图像数组长度。
我不能 100% 确定是什么导致了闪光,但我的猜测是因为您使用的是相同的元素并且只是设置了背景图像,所以当您用第二张图像替换第一张图像时一秒钟用于下载,因此您可以看到那段时间的背景。一旦你浏览完所有图像,它们就会在内存中,所以你不会再看到闪光灯。解决方法是预加载所有图像或加载元素中的下一张图像并将其放置在旧图像之上,然后淡入。
这些问题是可以修复的,但您可能还想从众多图片幻灯片插件中挑选一款。许多人使用 jQuery,但不是全部,您可以对它们进行相当多的自定义。它可能会为您省去一些麻烦。
让我们简化一下,因为您已经掌握了基础知识。这是一些更新的代码:
$(document).ready(function functionName () {
var count = 0;
var images = ["slider1","slider2","slider3","slider4"];
var image = $(".fader");
image.css("background-image","url("+images[count]+")");
var count = 1;
setInterval(function () {
image.fadeOut(500, function () {
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if (count == images.length) {
count = 0;
}
}, 10000);
});
我所做的唯一更改是在设置第一张图像后将 count
设置为 1
;这样,当间隔开始时,它将以 1
开始,但在结束时将循环回到 0
。
至于你对白色闪光的评论,是的,很可能是背景是白色的,你要下降到 0 并再次备份。如果你想要更少的闪光灯,你可以将 div 的背景颜色更改为黑色或中灰色或类似的颜色。如果你想完全摆脱它,你需要转向不同的策略,你有第二个图像覆盖在第一个图像上,新图像淡入,然后可以删除底部图像并另一个新的可以在第二个之上。你总是从一幅图像淡入另一幅图像,而不是从一幅图像消失然后再回来。
关于javascript - (图像渐变器)淡化颜色和 1 次重复淡化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39863085/
我有一些 div 垂直对齐内部的 display: table 和 display: table-cell。无论如何,问题是,当我通过 fadeTo() 或 fadeIn 使用 jQuery 设置不透
使用 jQuery,我想在“框”中循环显示 3 个不同的背景图像和 3 组文本,每 6 秒淡出到下一个。 CSS: .box { background: url(/filepath/to/image.
点击背景更改为图像或颜色。为此,首先我为 body 创建了两个类: body.bg-color { background-color:red; } body.bg-img { back
正如标题所说,我想要实现的是在 "Patch "+ $Patch_next 字符串中淡入淡出,而不是在悬停时立即显示它。 if(isset($Patch_next)){
我正在创建一个导航并且已经为按钮制作了 CSS 属性。 我想在静态按钮属性之上淡入悬停属性。 这样做最有效的方法是什么? CSS 看起来像这样: Home
我已经能够淡化 div 的顶部,但我无法让底部也淡化。我想我可以反转我用来淡化顶部的 css,但它不起作用。 HTML: LOCATIONS CSS .contai
我想创建一个特定大小的列表,但它的内容可能比列表大。 我认为如果列表中有元素并且它们在底部和顶部淡出,同时为也包含该列表的容器提供背景图像,那将会非常漂亮。事实证明,这比预期的要难,而且我很难为此类事
我对我的问题做了一些研究,不幸的是我的问题没有解决方案。最接近的是 Fade UIImageView as it approaches the edges of a UIScrollView但它仍然不
大家好,我在淡出 HTML 文档中的 Div 时遇到了问题。我能够使用相反的相同功能,并且能够根据需要淡入但不能淡出 div。有什么想法吗? 这是 JavaScript 函数: function fa
我对 Java 和 SWT 还很陌生,希望能将一幅图像融入到另一幅图像中。我现在在标签中有一张图片(相关代码): Device dev = shell.getDisplay(); try {
这个问题在这里已经有了答案: How to set gradient color to the background of UILabel in iPhone (2 个答案) 已关闭 8 年前。
我想下载 zip 并解压。当我下载 zip 时,一切正常。但是,当解压缩时,我的界面会停止几秒钟,有时应用程序会崩溃。如何解决? Zip 文件大小 650 MB downloadButton - 单击
我想使用 jquery 淡入一个 div,但它不起作用。如果我将“fout”(这是我想要淡入的元素)的可见性设置为隐藏,那么它不会显示任何内容,尽管消息仍然存在,因为我可以看到滚动条在移动。知道为什么
我目前有一个填充了用户 friend 的 tableView。 tableView 是 TableViewController 的一部分,它可以正常运行。我希望 tableview 在最底部永久淡化,
我有一个我正在尝试构建的 CSS 下拉菜单,下拉菜单的背景有一个褪色/锥形框阴影: 我无法实现如何让方框阴影真正变细/淡出。 这是我现在所在的位置:http://jsfiddle.net/Shpigf
我正在寻找一种在 Unity 中淡化 TextMesh-Text 的 alpha 值的方法,但我无法在线找到解决方案,也无法在 LeanTween Documentation 中找到解决方案。 . L
如何使用 jQuery 淡化 div 的边缘?想象一个内部有图像的旋转木马,可以水平滑动。如何淡出左右两侧,使边缘附近的图像逐渐消失。 希望它是清楚的。 :) 最佳答案 Webkit 浏览器(即 Ch
我发现与 Javascript 无关的默认智能感知建议。 native 浏览器功能太多I will never use . 有没有办法关闭/限制智能感知?例如隐藏浏览器方法,如上面链接中的方法。 最佳
我正在尝试淡出 detailView 中 UIWebView 的底部。它更像是褪色最后 20-40 像素。我正在为“ReadMoreFade”(link)使用 CSSTricks 代码。下面粘贴了我的
我想创建一个显示成功消息的模态弹出窗口(针对移动设备)。 我目前正在为整个内容添加一个不透明的背面叠加层,使用 .overlay { position:fixed; top:0px;
我是一名优秀的程序员,十分优秀!