IE-11贬低了与时间相关的功能.在ie11中使用什么来代替t:seq来切换图像

IE-11 has depreciated the time related features. What to use in place of t:seq in IE 11 to switch the images

本文关键字:什么 图像 seq 时间 ie11 功能 IE-11      更新时间:2023-09-26

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

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

语法是这样的

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

所以它将每2秒调用定义的函数。

现在有不止一种方法可以在div内放置图像以达到

的效果

一个例子是这样的

<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秒滑动当前图像(使用这里给出的方法)并加载下一个图像(通过调用next()函数)并使新加载的图像褪色。

如果我们到达终点,我们就重复这个过程。

JSfiddle

PS:

有几个JavaScript插件也可用于实现您的目标。

  • 菜单栏
  • BxSlider(基于jQuery)

你可能还想检查这个SO线程