jquery实现轮播图效果

        总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果

     先看下最后的效果图

     

      其实轮播图的原理都差不多，一个搞明白后其他也都能搞明白了。先来分析下html的结构。其实结构还是比较简单清晰的。轮播图最外层有个div，里面又分成标题点击按钮一排的title为一个div，下部内容展示又是一个div。

      上面的title的这块大的div是用了浮动的定位方式，而下面的轮播图展示却是用了position定位的方式，它的结构是这样的，最外面套了一层div，给了它一个relative的相对定位，并给了一个固定宽度，用overflow隐藏子元素溢出的部分，它的子元素就用absolute的绝对定位，并给它一个多个展示轮播图的大宽度，这里给的是2500，多出来也没关系，因为父元素用了overflow，每个轮播图都用一个li来写，html的大概结构是这样的，还是比较清晰的。

       再来分析它的JQ的思路是怎样的。它首先定义了2个全局变量，一个是初始化的第一个版面，

var page = 1;

以及每版放4个图片

var i = 4;

       然后给向后按钮绑定一个点击事件，然后定义了几个变量，通过当前元素来找到它的父元素，套在下面轮播图展示区最外层的div，然后再一层层往下找，通过这个最外层的div再向里找到轮播图展示区域的div，再通过父元素找到轮播图展示区域外围的div，再得到这个外围div的宽度。接下来这2个变量比较关键，找到轮播图的总长度（即li的个数）以及用了Math.ceil()这个函数（只要不是整数，就往大的方向取最小的整数），把轮播图的总长度除以一版4页来得出共有多少版数。

      然后开始添加动画，先做了个判断，判断轮播图展示区域是否处于动画状态

if( !$v_show.is(":animated") )

，如果未处于动画状态，则再判断，如果

if( page == page_count )

如果已经到最后一个版面了,如果再向后，必须跳转到第一个版面。那么就让轮播图展示区域实行动画，通过把left值设为0，让轮播图跳转到第一个版面。

$v_show.animate({ left : '0px'}, "slow");

并把变量page还原为1。如果还未到达最后一个版面，则通过改变left值，达到每次换一个版面

$v_show.animate({ left : '-='+v_width }, "slow"); 

并让

page++;

每点一次，页面的版数就增一。

       最后再处理这里的效果，，还是通过父元素找到点所在的span元素，通过eq()方法来找到是第几版，然后确定点应该高亮在哪个，注意由于eq()方法序列是从0开始的，所以这里应该是eq((page-1))，给当前的点添加高亮的样式，给其他的点去除高亮。

       如果是点击向前的按钮，前面都和点击向后的按钮一致，直到这里，点击向前按钮，已经到第一个版面了，则如果再向前，必须跳转到最后一个版面。

$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");

并把

page = page_count

如果还未点击到第一个版面，则

$v_show.animate({ left : '+='+v_width }, "slow");

并让

page--;

而这边的效果都是一致的。