幻灯片效果与焦点图效果有相同之处，通常来说图片滚动的原理是相同的。本节实例的原型为腾讯视频首页的幻灯片效果。
在效果上，大图为核心，并采用淡入淡出效果展示。大图的下部分有视频的文字说明，前一个和后一个按钮，以及可以横向滚动的小图集合。整体可以自动播放，鼠标在幻灯片上悬浮时可以暂停播放。
CSS布局部分主要工作为定位各部分的位置。大图的li和文本说明的li使用绝对定位，使所有元素重合，小图ul则需使用相对定位。
友情提示：本节示例涉及JavaScript相关知识，建议学习完JavaScript章节后再回头练习。本节示例相对复杂，对于初学者来说有一定的难度，这里就不再显示示例代码，感兴趣的读者可以下载到本地学习。