IE-11 已经贬低了与时间相关的功能。在 IE 11 中使用啥代替 t:seq 来切换图像

Posted 2023-03-06

【中文标题】IE-11 已经贬低了与时间相关的功能。在 IE 11 中使用啥代替 t:seq 来切换图像

【英文标题】：IE-11 has depreciated the time related features. What to use in place of t:seq in IE 11 to switch the imagesIE-11 已经贬低了与时间相关的功能。在 IE 11 中使用什么代替 t:seq 来切换图像

【发布时间】：2014-09-05 06:11:42

【问题描述】：

我是 CSS 新手。 我想使用 CSS 切换屏幕上的图像。 早些时候我使用 t:seq 容器在 Internet Explorar-8 中执行相同的操作，但在 Internet Explorar-11 中它已被贬值。 所以我的问题是，如果 IE-11 中与时间相关的功能已被贬低，那么使用什么来代替我之前用来更改屏幕上特定持续时间的图像的“t:seq”。

【问题讨论】：

您好，欢迎来到 SO，您所说的“切换屏幕上的图像”到底是什么意思，您想创建一个图像滑块类型的功能吗？

切换图像意味着..只想显示一个图像 2 秒，然后再显示另一个图像 2 秒......等等。

这可能很有趣，更具体地说是transition-delaydeveloper.mozilla.org/en-US/docs/Web/Guide/CSS/…

【参考方案1】：

您可以使用 javascript 中的 setInterval() 函数轻松实现相同的功能。

语法是这样的

setInterval(function()alert("Hello"), 2000);

所以它会每 2 秒调用一次定义的函数。

现在有不止一种方法可以在 div 中侧边图片来实现效果

一个例子是这样的

HTML

<div id="slideshow">
    <div>
        <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
    </div>
    <div>
        <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
    </div>
</div>

CSS

#slideshow 
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    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;

JavaScript (jQuery)

$("#slideshow > div:gt(0)").hide();

setInterval(function () 
    $('#slideshow > div:first')
        .animate(width: 'toggle')
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
, 2000);

所以在上面的代码中，我们最初隐藏了#slideshow容器中的所有其他元素，除了第一个。

然后每 2 秒滑动当前图像（使用here 给定的方法）并加载下一张图像（通过调用next() 函数）并淡化新加载的图像。

我们是否到达终点，我们只是重复该过程。

这里是

JSfiddle

PS：

还有几个 JavaScript 插件也可用于实现您的目标。下面列出了其中一些

Menucool non jquery JavaScript Slider BxSlider（基于 jQuery）

您可能还想查看this SO thread

【讨论】：

您好，我面临一个问题...请您帮忙。您提供的解决方案适用于以下结构.. ..但在我的情况下，我的结构如下...................... ...所以我的问题是，当我没有 每个图像的标签时，您能否提出解决方案。但我在列表顶部只有一个 div 标签。

@MukulKashmira：您只需要在 CSS 中包含图像高度，并且必须将选择器更改为 $('#slideshow > img:first')。这是更新小提琴的链接，希望您能找到它有用。 jsfiddle.net/64rkn

@MukulKashmira ：您还可以将opacity: 'toggle' 属性添加到动画功能以稍微增强效果。这是jsfiddle.net/64rkn/1的小提琴

@mukul 。如果上面的答案解决了你的问题，你可以接受，或者如果你有其他问题，你可以在这里问它

谢谢。这真的很有帮助。它解决了我的问题:)。非常感谢。