我是 CSS 新手。 我想使用 CSS 切换屏幕上的图像。 早些时候我使用 t:seq 容器在 Internet Explorar-8 中执行相同的操作,但在 Internet Explorar-11 中它已被贬值。 所以我的问题是,如果与时间相关的功能在 IE-11 中已经贬值,那么应该使用什么来代替我之前用来更改屏幕上特定持续时间的图像的“t:seq”。
最佳答案
您可以使用 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
附言:
还有几个 JavaScript 插件可用于实现您的目标。下面列出了其中一些
- Menucool non jquery JavaScript Slider
- BxSlider (基于 jQuery)
您可能还想查看 this SO thread
关于javascript - IE-11 贬低了与时间相关的功能。用什么代替 t :seq in IE 11 to switch the images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24751587/