jQuery淘宝风焦点轮播图

jQuery 的淘宝风焦点轮播图，功能挺全，结构也清晰，适合电商类页面用来展示商品、活动或者促销。自动播放、按钮切换、指示器一应俱全，切换效果还挺顺滑，用fadeTo这种方法动画，看起来舒服又不突兀。

焦点图的结构比较简单：图片容器、图片列表、控制按钮、指示器、自动切换五个要素。用 jQuery 搞定它不难，像$('.banner img')选出图片，配合.fadeIn()/.fadeOut()来切换，逻辑上也就几步。

事件绑定方面，按钮点击、指示器跳转都靠.on('click')搞定，操作直观。你还可以加点setInterval定时切换，逻辑控制得当，就不会出现跳转混乱的问题。

响应式也考虑到了，样式上用百分比、媒体查询，适配手机和平板都挺自然。移动端再加上touchstart和touchend监听滑动手势，体验就更完整了。

源码文件名是texiao531_1560681043，你解压之后应该能看到 HTML、CSS、JS 文件分得清楚。可以直接拿来跑，也方便你自己改，比如图片路径、按钮样式这些，动手性挺强。

如果你想要做个类似淘宝那种切换自然又有指示器的轮播图，这套代码还挺值得一试的，是你已经熟点 jQuery 的话，上手会快。