Question

根本没动。更改图片的大小显示前一个或下一个，但没有动画或转换发生。这是控制它的HTML和CSS。这很长，因为我以一种奇怪的方式阅读它。

HTML：

 <div class="slides-control" style="position: relative; height: 100%; width: 3861px; left: -1287px; transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform; transition-duration: 600ms; -webkit-transition-duration: 600ms; transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transform: translate3d(-1287px, 0px, 0px); -webkit-transform: translate3d(-1287px, 0px, 0px);"><ul class="slides-container" style="display: block; margin: 0px; padding: 0px; list-style: none; position: relative; height: 100%; opacity: 1; transition-property: all; -webkit-transition-property: all; transition-duration: 0s; -webkit-transition-duration: 0s; transition-timing-function: ease; -webkit-transition-timing-function: ease;">

    <li style="display: block; left: 1287px; position: absolute; overflow: hidden; height: 100%; width: 1287px; top: 0px; z-index: 2;"><img src="http://tinyurl.com/nxuqz5w" style="-webkit-backface-visibility: hidden; position: absolute; left: 0px; top: -452px; z-index: -1; max-width: none; height: 1287px; width: 1287px;"></li>

    <li style="display: block; left: 2574px; position: absolute; overflow: hidden; height: 100%; width: 1287px; top: 0px; z-index: 0;"><img src="http://tinyurl.com/oexohmp" style="-webkit-backface-visibility: hidden; position: absolute; left: 0px; top: -452px; z-index: -1; max-width: none; height: 1287px; width: 1287px;"></li>

    <li style="display: none; left: 1287px; position: absolute; overflow: hidden; height: 100%; width: 1287px; top: 0px; z-index: 0;"><img src="http://tinyurl.com/qb5pg56" style="-webkit-backface-visibility: hidden; position: absolute; left: 0px; top: -452px; z-index: -1; max-width: none; height: 1287px; width: 1287px;"></li>

其余代码在jfiddle

中

https://jsfiddle.net/39pwb98w/

Answer 1

如果我在这里遗漏了什么，请原谅我，但有没有可以播放幻灯片的脚本？ CSS转换只从一种状态转移到另一种状态，因此如果没有脚本来更新状态，它将不会改变。您的定位风格可能已经应用，这可以解释为什么您会看到第2张幻灯片。

你可以将转换链接在一起并循环，这可能会产生你想要的效果，尽管它可能对我的链接来说有点太难了。

请参阅此处了解转换迭代：http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

请参阅此处了解转换链：http://www.w3schools.com/css/css3_transitions.asp

使用webkit添加幻灯片仅显示第二个图像

1 个答案: