jQuery图文字幕焦点轮播

带打印字幕的焦点轮播，用得好真的能让首页“活”起来。焦点图切换的同时，字幕能同步展示标题或，视觉+信息双管齐下，用户扫一眼就知道重点在哪儿。用在产品推荐、活动广告区都蛮合适的。

图文结合的焦点轮播其实不难搞，结构上就是图片区域+文字区域。图片轮播可以用jQuery或者原生 JS做，文字部分只要配合当前图片内容动态更新就行了。关键是节奏要对上，别图片走了半天文字才跟上，那观感就差了。

如果你习惯用jQuery，那种fadeIn/fadeOut切换就挺适合这种效果，搭配setInterval搞个自动播放也不费劲。文字部分可以放在一个.caption里，跟着图片的index同步更新。

样式上建议给字幕加点半透明背景，再用position: absolute固定在图下角，不抢画面但又清晰可见。手机端注意一下字号和间距，毕竟文字太挤就不友好了。

如果你想直接上手看看怎么做，可以看看这个资源包：texiao103_1560681042，里面有完整代码和示例，拿来改改就能用。还有一些不错的参考链接，像这个jQuery 图文焦点广告轮播代码，也挺实用的。

，带打印字幕的焦点轮播是个挺“讨巧”的效果，简单几步就能大幅提升页面的专业感。如果你正好在做首页或者专题页，不妨试试看。