中国航空集团公司的官方网站使用了jQuery库来实现一个幻灯片效果。在这个网站上,有一个名为.JQ-slide
的CSS类用于定义幻灯片的基本样式,包括高度、宽度、溢出隐藏和相对定位。.JQ-slide-content
类用于定义幻灯片内容的样式,包括边距、内边距、绝对定位以及列表项的显示方式。此外,还有一个名为.JQ-slide-content li
的CSS类,用于定义包含图片和文本的列表项的样式,包括高度、宽度和相对定位。
在HTML部分,使用了一个具有.JQ-slide
类的<div>
元素,以及一个包含多个.JQ-slide-content li
类的无序列表。每个列表项都包含一个图片元素(img
)和一个文本元素(span
)。
通过调用jQuery函数$().ready()
,当文档加载完成后,使用Slide
方法为.JQ-slide
元素应用幻灯片效果。该效果包括滚动动画(effect: "scroolX"
)、速度(speed: "normal"
)和计时器(timer: 3000
),表示幻灯片将在3秒后自动切换到下一张图片。
中国航空集团公司的官方网站通过使用jQuery和CSS实现了一个简单而优雅的幻灯片效果,为用户提供了丰富的视觉体验。