这是我第一次在教科书之外使用jquery,所以我当然会遇到一些问题。我已将代码添加到jsfiddle:http://jsfiddle.net/b2Nq9/3/ 看起来它适用于jsfiddle(当然jsfiddle上没有图像,但alt属性旋转正常),除非代码与实际图像一起运行,第一张图像很好,但是当第二张和第三张图像旋转时,我的布局变得不稳定。 看过firebug中运行的代码后,我注意到代码更改了css display属性。第一个图像,即工作的图像,在display:none和display:inline之间切换,而其他图像在display:none和display:block之间切换。 看起来我需要调整代码,以便将剩余的图像显示为内联而不是在旋转时阻止。我不知道该怎么做,会感激和帮助。
答案 0 :(得分:1)
.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
之间切换)
答案 1 :(得分:0)
为了保留您的布局,您需要为容器div添加宽度和高度。如果div中没有可见内容,并且没有定义的宽度和高度,则不会占用页面上的任何空间,这可能导致布局中断。 (div占据的空间基本上会“崩溃”)。发生这种情况的原因是,如果图像尚未加载,或者两个图像都设置为无显示的时间较短,则div将不包含任何可见内容。