jquery图像滑块setInterval问题

这是我第一次在课本之外使用jquery，所以当然我会遇到一些问题。我已经添加了代码jsfiddle在这里：http://jsfiddle.net/b2Nq9/3/ 看起来像它在jsfiddle上工作（当然没有图像在jsfiddle但alt属性可以很好地旋转），除非代码与实际图像一起运行时，第一个图像很好，但是当第二和第三张图像旋转我的布局变得不可思议。看着在萤火虫中运行的代码，我注意到代码更改了CSS显示属性。第一个图像，工作的图像在display：none和display：inline之间切换，而其他图像在display：none和display：block之间切换。它看起来像我需要调整代码，以显示其余的图像作为内联，而不是阻止他们的旋转。我不知道如何做到这一点，并会感激和帮助。jquery图像滑块setInterval问题

来源

2012-01-13 Doug Fir

你知道图像的宽度和高度吗？他们都是一样的还是全然不同的？ – 2012-01-13 20:25:09

@布莱恩格拉兹是的所有3是完全相同的大小，800 * 235像素 – 2012-01-13 20:32:00

为了保持你的布局，你要添加一个宽度和高度到你的容器分区。如果div在其中没有可见内容，并且没有定义宽度和高度，则它不会占用页面上的任何空间，这可能会导致布局中断。（div占据的空间基本上会“崩溃”）。发生这种情况的原因是，如果图像尚未加载，或两个图像都设置为无显示的时间较短，div将不包含任何可见内容。

来源

2012-01-13 20:41:59

工作 - 非常感谢 – 2012-01-13 20:51:45

.show()在元素上设置以下CSS：display : none。

所以，如果你想设置display : inline然后使用.css()函数：

elements.first().css({ display : 'inline' });

您将有同样的问题与.fadeIn(1000)，它设置它的display : block; opacity : 0后动画元素的不透明度。试试这个：

elements.eq(counter).css({ opacity : 0, display : 'inline' }).animate({ opacity : 1 }, 1000);

这里是一个演示：http://jsfiddle.net/b2Nq9/5/（你可以观看的元素display : none和display : inline之间切换）

来源

2012-01-13 20:24:46 Jasper

谢谢，我改变了我的代码，它仍然与你所建议的改变运行，但问题仍然存在 - 根据萤火虫图像2和3之间改变显示状态没有和块，而不是和内联。有任何想法吗？ – 2012-01-13 20:29:07

我更新了我的答案大约一分钟前，检查演示：http://jsfiddle.net/b2Nq9/5/ – Jasper 2012-01-13 20:30:37

非常感谢，它的工作原理是萤火虫现在显示交替显示无和内联显示，但唉，它没有，因为我不明白的原因，帮助了我。页面元素跳转到屏幕中间时，图像下面的p元素消失为第二和第三个图像。我正在考虑发布一个新问题。善良的代码是可怕的！感谢您的帮助 – 2012-01-13 20:42:40

jquery图像滑块setInterval问题

回答

相关问题