网页设计技巧：结合 jQuery 特效与插件，打造卓越营销效果

轻量级且简洁的 jQuery 库，使得在电商网站中添加交互效果和商品展示功能变得相对容易。

本期“网页设计技巧”将演示如何将 jQuery 效果与 jCarousel 插件结合，在页面顶部创建商品展示区。该区域每次显示四个产品并自动向左滑动（每三秒切换一次）；当访客悬停于产品图片时，滑块暂停并显示简要描述。

下载 jCarousel

本示例使用 Jan Sorgalla 开发的 jCarousel 插件。下载最新版本（0.2.3）后，可获得包含 CSS、图片及 JavaScript 文件（含 jQuery 1.2.3）的压缩包。

需注意：撰写本文时 jQuery 最新版为 1.3.2，但 jCarousel 与之存在兼容性问题。若后续需使用依赖新版 jQuery 的其他插件，请务必测试兼容性。

调用外部文件

实现 jCarousel 的首要步骤是引用所需的 CSS 和 JS 文件：

请根据实际文件目录调整路径，例如：src="the/path/to/your/folder/jquery-1.2.3.pack.js"。

创建 MyCarousel <UL>

在 HTML 中添加一个 ID 为 mycarousel 的无序列表（<ul>），用于承载滑块内容。基本结构如下：

视频示例中的完整列表代码如下：

调用并配置函数

为实现自动滚动，需在 HTML 的 <head> 部分添加以下脚本代码：

• auto: 3, 设置每 3 秒自动前进一次（改为 10 则每 10 秒切换）。
• scroll 设置：默认 jCarousel 每次滑动 3 个 <li>。为实现逐个滑动，需打开 jquery.jcarousel.js 文件（约第 54 行），将 scroll: 3 修改为 scroll: 1。

注：虽然理论上可在 HTML 初始化参数中直接设置 scroll: 1，但在自动滚动模式下可能触发 Bug（导致从首项跳至末项），建议直接在 JS 源文件中修改。

准备 CSS

部署 jCarousel 后，需编写 CSS 控制样式及滑动效果。

1. 列表项样式
设定 <li> 的尺寸与布局，确保内嵌的 <span> 描述能叠加于图片之上：

2. 描述信息样式
为 ID “marMess”（营销信息）的 <span> 设置定位与半透明背景，使其悬浮于图片上方：

3. 清理默认皮肤
移除 jCarousel 自带的边框、箭头等冗余样式。

管理页面的降级表现

为确保未启用 JavaScript 的访客也能正常浏览，需遵循优雅降级原则。

对于滑块本身，禁用 JS 仅显示前四项尚可接受。但对于产品描述，若完全依赖 JS 显示，无 JS 用户将无法看到信息。因此，策略应为：CSS 默认显示描述，JS 负责隐藏。

由于 CSS 中已设 display: block，描述默认可见。接下来只需在 <head> 中添加一行 JS 即可在支持 JS 时隐藏它们：

使用 jQuery 的 hide() 方法是最简便的实现方式。

显示产品描述

利用 jQuery 的 fadeIn 效果，实现鼠标悬停时淡入显示描述：

• $('li').mouseover：监听鼠标移入列表项事件。
• $('span', this)：仅影响当前悬停项关联的 <span>。
• fadeIn('100')：设置 100ms 的淡入时长。

再次隐藏产品描述

最后，添加鼠标移出时隐藏描述的逻辑，完善交互闭环：

至此，我们成功在有限空间内实现了美观的商品轮播展示。以下是完整的 HTML 页面代码：