jQuery悬停控制图片轮播效果

jQuery 的图片轮播配上悬停控制，体验还蛮顺手的，适合那种需要用户细看图片的场景，比如产品图、作品展示页什么的。

代码逻辑不复杂，主要靠jQuery的hover()函数来鼠标悬停事件。你可以在鼠标移上去的时候暂停轮播，移开再恢复，挺灵活的。

HTML 结构也简单，一排图片包在一个容器里，用CSS搞定隐藏显示，position: relative配上overflow: hidden，就能做出轮播的基础框架。

轮播逻辑就是定时切图，用setInterval()搞定自动播放，鼠标悬停时clearInterval()暂停。手动切换的话，加个左右按钮再加点点击事件就行。

想上手的话，可以直接参考这个资源：texiao1352_1560681047，HTML、CSS、JS 都有，结构清晰，适合直接改造。新手也能快看懂。

如果你做的页面里图片展示比较多，又不想搞太复杂的轮播组件，那这个方案就挺合适的。要是想拓展一下，也可以看看下面这些类似的交互效果：

• jQuery 悬停控制图片轮播代码简单
• 鼠标悬停九宫格图片高亮显示
• 图片缩小显示全图
• 鼠标悬停显示文字特效

记得好定时器的清除和恢复，还有不要忘了在$(document).ready()里初始化轮播。细节做对了，交互体验才能好。