焦点图主要是指网页焦点位置的图片，一般焦点图可以是单张图，也可以是一组动态切换的图片的组合。由于处在终端用户视觉焦点位置因此焦点图的作用至关重要，焦点图也成为网站首页面设计的重点。焦点图样式如下所示：

常用实现焦点图或者轮播图的前端技术较多，如JavaScript技术、BootStrap组件、CSS技术等。本文主要介绍使用CSS3提供的动画功能实现简单轮播效果。首先给出轮播实现动画效果如下所示：

1、实现的基本思路

本例题设计实现图文轮播，主要包括图片的轮播与文字轮播两部分，基本思路是实现按照周期改变图层背景实现图片的轮播。改变或者移动文字图层位置实现文字部分的移动及动画效果。