最近在看怎么写js插件，尝试写了一个简单的图片轮播插件 jqury.picPlay.js 。

基本html框架为<div class="picPanel"><div class="slider"></div></div>，根据需要往里添加class为.pic、.num、.txt的div来分别放置图片列表，数字列表和文字列表。

调用方式：$.fn.jsPicPlay(setting);

setting可以设置三个参数

type: 图片切换方向，默认为横向切换，值为2的时候为垂直切换

intervalTime:设置图片多久切换一次，默认为3000ms

speed:图片切换的速度，默认为200ms

 

插件源码

JS

(function($){    $.fn.extend({        jsPicPlay:function(setting){            var setting = setting || {};            var config = {                type:1, //默认横向切换                intervalTime:3000,                speed:400            };            $.extend(config,setting);            var panel =  this.length ? this : $(".picPanel");            panel.each(function(){                var panel = $(this),pic = $(".pic",panel),num = $(".num",panel),txt = $(".txt",panel),cn="on",intervalTime = config.intervalTime,speed = config.speed,type=config.type,curIndex=0,myTime = 0;                var picList = $("ul",pic),picItem = $("li",pic),numItem=$("li",num),txtItem = $("li",txt);                var flash = {                    setStyle:function(){                        switch(type){                            case 2:                                picList.css({position:"absolute"});                                    break;                            default:                                picList.css({position:"absolute","width":picItem.width()*picItem.length});                                picItem.css({
       "float":"left"});                        }                    },                    setNum:function(){                        var ht="";                        for(var i=1;i
        
         ";                        }                        num.append("
         
          "+ht+"
         
");                        numItem = $("li",num);                        numItem.first().addClass("on");                    },                    play:function(){                        ++curIndex >= picItem.length && (curIndex=0);                        switch(type){                            case 2:                                picList.animate({                                    top:-curIndex*picItem.height()                                },speed);                                break;                            default:                                picList.animate({                                    left:-curIndex*picItem.width()                                },speed);                        }                        numItem.removeClass(cn).eq(curIndex).addClass(cn);                            txt.length && txtItem.eq(curIndex).show().siblings().hide();                    },                    start:function(){                        myTime = picItem.length && setInterval(flash.play,3000);                    },                    stop:function() {                        clearInterval(myTime);                    }                                    };                flash.setStyle();                pic.length && num.length && flash.setNum();                flash.start();                num.delegate("li",'click',function(){                    flash.stop();                    curIndex=numItem.index($(this))-1;                    flash.play();                    flash.start();                });            });            return panel;        }    });})(jQuery);
        

CSS

.picPanel ul,.picPanelul li{
          padding:0;    margin:0;    list-style:none;}.picPanel {
              font-size:12px;    font-family:arial,simsun;}.slider{
          width:400px;    height:300px;    padding:2px;    border:1px solid #ccc;    overflow:hidden;    position:relative;}.pic {
          width:400px;    height:300px;    overflow:hidden;    position:absolute;}.num {
          position:absolute;    bottom:20px;    right:10px;    height:20px;}.num li {
          width:14px;    height:14px;    background:#000;    color:#fff;    margin:0 3px;    text-align:center;    line-height:14px;    font-size:10px;    cursor:pointer;    float:left;}.num .on {
          font-weight:bold;    background:#ff0000;}.txt {
          position:absolute;    bottom:2px;    height:20px;    width:400px;    opacity:0.6;    filter:alpha(opacity=60);    background:#000;    overflow:hidden;}.txt li {
          color:#fff;    height:20px;    line-height:20px;    padding-left:8px;    z-index:99;}

示例：

完整的带有数字和文字的轮播

• 
• 
• 
• 

 

• 风景1
• 风景2
• 风景3
• 风景4

html

       
            
        
                
         
                    
          
                        
           
                        
           
                        
           
                        
           
                    
          
                
         
                
         
                
         
                    
          
                        
           
风景1
                        
           
风景2
                        
           
风景3
                        
           
风景4
                    
          
                
         
            
        
        
       

执行JS

$("#picOne").jsPicPlay();

 

仅有图片的轮播

• 
• 
• 
• 

html

执行JS

$("#picTwo").jsPicPlay({type:2});

 

如果当前页面的一个或多个轮播都使用同样的设置直接写$.fn.jsPicPlay()来执行;