自己动手编写的jquery插件,模仿搜狐汽车图片库展示效果

      昨天接到电话,说客户希望做一个图片展示的效果,最好跟搜狐的汽车图片库展示效果类似,其效果连接如下:

 

     http://db.auto.sohu.com/modelpic-70358_detail.shtml?r=1245729162185#g=70358&p=285792

 

    我看了一下,给我的感觉这个效果应该不难啊。与其改别人的javascript代码,不如自己亲手写一个,也练练手。好久没写脚本啦。:)

 

     首先,我先研究了一下搜狐展示效果的html源代码,看看它的页面结构如何,然后我就照葫芦画瓢的把大致的页面给弄出来。结构如下:

 

      接下来,如何动手呢?我想这个脚本主要是给页面制作人员使用的。所以展示的数据不可能从数据库里面读取,就先用一个数组来代替。然后接下来就是关于一些分页什么的。比较简单。还是看一下我前台调用的代码吧。

 

    

 

      上面的代码,其实就是我的个人的一些思路啦。除了数据之外,还有页面容器的一些集合,设置每页的大小等等这些对象。

 

      本来代码很快就差不多完成了,不过不是很好,于是我想加入一些功能,如自动播放、淡入淡出的效果。我认为这些效果很实用,一般图片展示可能需要默认自动播放,然后还需要暂停什么的。

 

        另外对于代码也进行了一些重构的工作,一开始为了实现功能,很多代码写在一起,感觉不利于阅读和维护。

 

        还有就是首次写jquery的插件,也不是很熟悉。所以多花费了一些时间。另外个人有一个疑问,就是如何在编写jquery插件的时候,少做一些变量的赋值工作呢?这个我还是没有解决。

 

       下面附件中我放出源码,各位可以参考一下,如果有改进或者发现bug,请跟我联系。

 

       我的QQ:49940396,加的时候请说明“CSDN”,谢谢。

 

       附件下载

 

      http://download.csdn.net/source/2878464

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值