QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

我是如何去了解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,本文的实例演示请点击这里!谢谢观看,下次再见!

posted @ 2011-11-19 12:33 田想兵 阅读(...) 评论(...) 编辑 收藏
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com