初学jQuery，制作插件（一）－－－

　　最近开始学习jQuery玩，觉得用jQuery会让代码精炼不少，但是肯定会产生依赖，有人戏称“我们不是在写javascript代码，而是在写jQuery代码。”，也是，不过我只是个业余爱好者，不用开发啥东西，纯粹好玩儿，就当个jQuery的忠实追随者吧！

　　看到网络上有好多的图片幻灯片，也想自己写一个，于是乎就在jQuery的基础上编了一个，就是最常见的那种，不过也有一些小的区别，还算能用吧。在线演示的地址是：http://suchfish.com/picSlider/，上面有demo下载的链接。

　　说明以及图片：

A jQuery plugin ---- ImageSlideShow

Author:jf_dai

Many slideshows came out at the web 2.0 period.Here,I also write one when I start learning jQuery lib.
jQuery lib is a wondful lib that it makes everything easier.This plugin is based on jQuery 1.4.2,other jQuery version have not test yet.

To use this plugin,include the style file and javascript file first as bellow:

    <link href="jquery.picSlider.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.picSlider.js"></script>

Then build the html tags as bellow:

        <div id="picSlider">
            <div id="picBox">
                <ul>
                    <li><a href="#" title="奇特的扇形叶片，唯独是银杏"><img src="leaf.jpg" alt=""/></a></li>
                    <li><a href="#" title="落下的银杏叶片，依旧具有如此遒劲的纹理"><img src="yleaf.jpg" alt=""/></a></li>
                    <li><a href="#" title="青色的果实，累累的挂满枝头"><img src="greenfruit.jpg" alt=""/></a></li>
                    <li><a href="#" title="金果喜人，丰收在望"><img src="yellowfruit.jpg" alt=""/></a></li>
                </ul>
            </div>
            <div id="picIndex"></div>
            <div id="picLink"></div>
        </div>

At last,call the function:

        var pics = [
            {'src':'01.jpg','href':'#','title':'秋天的银杏树','taget':'_blank'},
            {'src':'02.jpg','href':'#','title':'银杏行道树，秋天的金色','taget':'_blank'},
            {'src':'fall.jpg','href':'#','title':'美丽的金秋吸引着人们','taget':'_blank'}
        ];
        $(document).ready(function(){
           $("#picSlider").slidePics({'width':334,'height':224,'slideData':pics,'usePics':'both','effect':-1
           });
        });

Features:

Numeric navigation
Title description
Slide data can be construct in html or given in a json object,and offered a switch for you to choose witch or both two kinds of slide data.
All 12 effects offered.Many methods can be used to specify the effect.

The default settings of the plugin:

    $.fn.slidePics.defaults = {
        'width':'300px',//宽度
        'height':'225px',//高度
        'float':'none',//浮动特性
        'lnkTxtAbovePic':true,//链接文字显示在图片之上.注意：如果为false则在图片地下显示链接文字，
        此时，整个slider的高度会自动加上22个px，即其高度为opt.height + 22
        'delay':5000,//播放间隔
        'duration':500,//渐显间隔
        'picDivID':'picBox',//图片所在DIV的ID 
        'indexDivID':'picIndex',//图片索引所在DIV的ID
        'linkDivID':'picLink',//链接显示DIV的ID
        'slideData':[],//以json对象的方式指定幻灯片数据,格式如:
        [{'src':'images/xxx.jpg','href':'http://www.xxx.com','title':'访问下xxx.com','target':'_blank'},{...}]
        'usePics':'htmldef',//使用哪个图片数据？jsondata（由slideData指定的数据）或者htmldef（在html标记中指定的数据）
        或者both(同时使用这两项数据)
        'effect':'none'//定义使用那种切换效果，为了提高性能，默认为无效果。可选："none","auto","fadein","rtl","ltr","bt","tb","ltrb","lbrt",
        "rtlb","rblt","h","v","etc","cte", 还可以使用数字：-1为随机效果，等价auto,
        其余取值于区间[0-13],使用bool值时，true为随机效果(random),false为无效果(none).
    };

Download the jquery.picSlider-0.1.1.min.js(5.75Kb) file.

Download the picSlider.demo.rar(307Kb)file.