我是如何去了解jquery的(六),案例之幻灯片轮换

我是如何去了解jquery的(六),案例之幻灯片轮换

作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

在开始之前，我们还是先看下这个所谓的幻灯片出来，到底是起着什么样的作用的，首先一般说到幻灯片，我们最先想到的是PPT，(不是PPTV,是powerpoint^_^)，PPT的作用就很清楚了，它是一屏一屏的进行放映，文字较少，图形较多，这是它的一个特点，所以我们用到幻灯片的地方也都是以图片为主，如果是一大段的文字就应该用上一节说到的选项卡了。既然是图片，就应该有很吸引人的主题，比如某某门啦，不然谁会点进去看啊，是吧，既然是很重要的内容，所以一般幻灯片在整个网站上的位置也是在最重要的地方，根据人体本能反应，打开网页的第一视角反应，是先看网页内容的左上角，搜索引擎也是如此，所以，这里不能随便放，即不可多放，也不能少放，不然就很浪费了，一般在这里放上三到五个主题。扯远了，要再扯回来有点困难，所以我们就转到正题上来，总之，幻灯片即有选项卡的优点，又有它自己的特色。是个好东西就行了，但一个页面，一般也只有一个这样的东西，就是左上角，或较上部分内容。

我们再分析幻灯片的另一个特点，它具有定时轮换的功能，在PPT里，它还有些小动画；上面说了，它很重要，但现在搜索引擎对图片并不给力，所以我们最后在图片上或下加上说明文字，好了，说了这么长段文字后，我们是应该进入编写功能的过程了。

本文的实例演示请点击这里！ 

首先，我们先给它进行排版，有一个容器，然后里面放一些选项，要么超出就隐藏，要么只显示其中一个，来，我们它的dom结构：

细心的朋友可能已经发现了，这个结构和我们上一篇里的选项卡简直是一模一样的了。好，按照选项卡的功能代码应该是这样的：

    function click1(){

        var index=$(this).index();

        $(".focus_tab > div.on").removeClass("on");

        $(".focus_tab > div:eq("+index+")").addClass("on");

        $(this).siblings(".on").removeClass("on");

        $(this).addClass("on");

    }    

$(".sidePic li").bind('click',click1)

这次还是一样，我们加了个class为on的样式。其实如果只是显示隐藏，我们可以使用jquery的show()和hide()方法，所以上面的方法还可以改成这样：

    function click2(){

        var index=$(this).index();

        $(".focus_tab > div").hide()

        $(".focus_tab > div:eq("+index+")").show();

        $(this).siblings(".on").removeClass("on");

        $(this).addClass("on");

    }

$(".sidePic li").bind('click',click2)

 接着呢，我们再给它加上鼠标滑动上去也是这样的效果：

$(".sidePic li").bind('click',click2).bind('mouseover',click1)

再然后，我们给它加个定时器，JS里的定时器有两种，一种setTimeout，另一种是setInterval，它们间的区别在于，setTimeout，是只执行一次的，setInterval是无限执行的，取消定时器分别对应的方法是clearTimeout和clearInterval，它的用法是：

setInterval(code,millisec[,"lang"])

第一个参数是要定时执行的代码，可以是没有名字的function(){...}，也可以是函数的名字如click1;注意，这个函数名是不带括号的，第二个参数是间隔的毫秒数，如果是setTimout就是等待执行的时间了，你也可以在没执行前就clearTimeout掉，如果要用到clearInterval这类清除定时器的方法，我们还得给它赋值到一个变量里，如下面的代码:

var mytime;

    function resetTime(){

         mytime=setInterval(play,1000);

    }

    resetTime();

    function clearTime(){        

        clearInterval(mytime);

    }

这里我有一个方法resetTime来定义一个无限定时器，接着马上执行了这个方法，下面是一个清除这个定时器的方法，记住，我定义的变量mytime是在这些方法的外面的，这样它的作用域才存在。我们定时执行的方法是play这方法，它要做的就是，显示下一张图片，如果当前是最后一张就显示第一张。如下代码：

var curIndex=0;   //当前索引

var imgCount=$(".sidePic li").length;    //图片的总数

function play(){

        curIndex++;

        if(curIndex>=imgCount){

            curIndex=0;

        }

        //console.log($("sidePic > li:eq("+curIndex+")"))

        $(".sidePic > li:eq("+curIndex+")").click();

    }

在第一行，我定义了个当前的索引号，接着算出了图片的总数，这些都不是必要的，为什么呢，因为我们还可以通过查询出当前显示的图片，然后查相邻项，但这样我觉得不太理智，所以我在函数外定义了这两个变量来保存，在play里，我先对当前索引进行了加一，(++在js里的意思就是curIndex=curIndex+1),因为执行这个函数是为下显示下一张，所以我加了一，然后我判断是否超出了图片总量，如果超出了，就显示第一张，这里我用大于等于号，是因为索引是从0开始的，也就是下一次如果是curIndex=3的话，而且它的总数也是3的话，就应该显示第一张也就是索引为0的那张，这里试试就知道了。然后我在最下面触发了数字点击的方法，类似于去触发了那个鼠标点击到那个小图标的事件。这样，定时器就完成了，是不是很简单，只是比上篇里的选项卡多了一个定时按顺序执行click的方法。

好了，是否就完了呢？没呢，你这样一直切换我看得比较慢，看不清楚呢，我想鼠标移上去的时候就停下来，移走后就继续轮换，这个就是在onmouseover的时候清除掉定时器，onmouseout时重置定时器了，刚才这两个方法我们都有写过了，就是clearTime()和resetTime()了。然后我们绑上事件:

$(".sidePic li").bind('click',click2).bind('mouseover',click1).bind('mouseover',clearTime).bind('mouseout',resetTime);

这样的连写应该并不陌生了，一般情况下的jquery方法，它都是返回的节点本身的jquery对象，所以我们可以连写，这在第一篇里有提到过了。好了，这个幻灯片就算基本成型了，或许有人会说，这个一点也不cool，太老土了点，不就显示隐藏吗，难道就不能像PPT那样来点特效吗？可以，请自己动手吧，你可以给它加个滤镜啥的，不过只有ie支持，当然你也可以写些火狐也支持的窗帘效果，这样是否代码量有点太大了。自己把握吧，我这里写了下滚动显示。不过我想留到下一篇再讲。期待吧！

最后还是这篇的结束语，如果你有任何的疑问都不要来问我，请重复阅读本文，或加入Q群70210212，本文的实例演示请点击这里！谢谢观看，下次再见！