Jquery实现全屏焦点轮播图效果

一、效果展示

二、实现原理

焦点轮播图原理如下图：（以四张图片组成的轮播图为例）

简单来说就是将这几张图片设置相同的宽度后横向排列组成一个长盒子，然后将这个长盒子每次向左移动 一个图片的宽 的距离(假如每张图片宽200px，即每次将长盒子向左移动200px)，当移动到最后一张图片时，再把长盒子的left值归0，重新进行上述操作。

然而，要想改变元素的left值就要给元素添加position属性，这样我们给图上黑盒子添加position：relative使其相对定位，再给存放四张图片的长盒子添加position：absolute使其相对于黑盒子绝对定位（这样定位的好处是可以通过改变黑盒子的left,top值来改变轮播图的位置）ÿ