最近学习JQUERY，发现许多功能重用率特别高，比如图片轮播、表单验证等。不可每次都重新写一遍，这时可以使用别人写好的插件，当然，也可以自己写插件。下面就是我写的一个简单的图片轮播插件的过程，由于也是初学，不足之处肯定是有的，敬请谅解。

一.确定DOM结构。

  1. <div id="imgcarousel"> 
  2.         <div id="carouselnav"> 
  3.             <ul> 
  4.                 <li>沿着江山起起伏</li> 
  5.                 <li>伏温柔的曲线</li> 
  6.                 <li>珍惜苍天赐给我的金色的华年</li> 
  7.             </ul> 
  8.             <div id="btn"> 
  9.                 <span>1</span> 
  10.                 <span>2</span> 
  11.                 <span>3</span> 
  12.             </div> 
  13.         </div> 
  14.  
  15.         <div id="carouselcont"> 
  16.             <a href="#nogo"><img src="p_w_picpaths/1.jpg"></a> 
  17.             <a href="#nogo"><img src="p_w_picpaths/2.jpg"></a> 
  18.             <a href="#nogo"><img src="p_w_picpaths/3.jpg"></a> 
  19.         </div> 
  20.      
  21.     </div> 

 

二.然后开始写功能。

 

  1. (function($){ 
  2.     $.fn.imgcarousel=function(options){ 
  3.         var defaults={ 
  4.              
  5.         //这里本来是想写一CSS样式的，但是考虑到可以把CSS写到单独的文件中，而不必这么复杂，所以放弃了 
  6.          
  7.         }; 
  8.         var opts=$.extend(defaults,options); 
  9.         this.each(function(){ 
  10.             var carousel=$(this);                                       //获取到这个模块 
  11.             var index=0; 
  12.             var indexnum=carousel.find("#btn span").length;              
  13.             var time=3000; 
  14.             carousel.find("#carouselcont img").eq(0).show();            //默认显示第一个图片                                                                              
  15.             carousel.find("#carouselnav li").eq(0).show();              // 默认显示第一条信息 
  16.             carousel.find("#carouselnav span").eq(0).addClass("hover"); //当鼠标移动到按钮上进，显示对应的图片和信息  
  17.             carousel.find("#carouselnav span").mouseover(function(){ 
  18.                 var index=carousel.find("#carouselnav span").index($(this)); 
  19.                 showImg(index); 
  20.              
  21.             }); 
  22.             carousel.hover(function(){                                  //鼠标移动到模块上，停止播放 
  23.                 if(myTime){ 
  24.                     clearInterval(myTime); 
  25.                 } 
  26.             },function(){                                               //鼠标移开则继续播放 
  27.                 myTime=setInterval(function(){ 
  28.                     showImg(index); 
  29.                     index++; 
  30.                     if(index==indexnum){ 
  31.                         index=0; 
  32.                     } 
  33.                 },time 
  34.                 ); 
  35.                      
  36.             } 
  37.                  
  38.              
  39.             ); 
  40.             var myTime=setInterval(function(){                          //默认自动播放图片 
  41.              
  42.                 showImg(index); 
  43.                     index++; 
  44.                     if(index==indexnum){ 
  45.                         index=0; 
  46.                     } 
  47.                 },time); 
  48.                  
  49.              
  50.  
  51.             var showImg=function(i){                                    //这里是这个插件的主要方法，用来实现图片的显示 
  52.                 carousel.find("#carouselcont img") 
  53.                     .eq(i).stop(true,true).fadeIn(800) 
  54.                     .parent().siblings().find("img").hide(); 
  55.                 carousel.find("#carouselnav li") 
  56.                     .eq(i).stop(true,true).fadeIn(800) 
  57.                     .siblings().hide(); 
  58.                 carousel.find("#btn span") 
  59.                     .eq(i).addClass("hover") 
  60.                     .siblings().removeClass("hover"); 
  61.             } 
  62.         }); 
  63.     } 
  64. })(jQuery); 

三.然后可以设计样式。

 

  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td,span { 
  2.         margin: 0; 
  3.         padding: 0; 
  4.     } 
  5.     img{ 
  6.         border:none; 
  7.     } 
  8.     #imgcarousel{ 
  9.         width:505px; 
  10.         height:338px; 
  11.         overflow:hidden; 
  12.         position:relative; 
  13.     } 
  14.     #carouselcont{ 
  15.         z-index:10; 
  16.      
  17.     } 
  18.     #carouselcont img{ 
  19.         width:505px; 
  20.         height:338px; 
  21.         display:none; 
  22.     } 
  23.     #carouselnav{ 
  24.         position:absolute; 
  25.         z-index:100; 
  26.         bottom:0px; 
  27.         right:0px; 
  28.         width:505px; 
  29.         height:22px; 
  30.         overflow:hidden; 
  31.         background:#222222; 
  32.     } 
  33.     #carouselnav ul{ 
  34.         list-sytle:none; 
  35.         position:absolute; 
  36.         left:20px; 
  37.         width:200px; 
  38.         display:block; 
  39.     } 
  40.     #carouselnav ul li{ 
  41.         color:#fff; 
  42.         font-size:12px; 
  43.         font-weight:700; 
  44.         line-height:22px; 
  45.         display:block; 
  46.         width:200px; 
  47.     } 
  48.     #btn{ 
  49.         position:absolute; 
  50.         right:5px; 
  51.         top:2px; 
  52.         height:18px; 
  53.         width:60px; 
  54.     } 
  55.     #btn span{ 
  56.         color:#fff; 
  57.         font-size:12px; 
  58.         line-height:18px; 
  59.         background:#666; 
  60.         width:18px; 
  61.         display:inline-block; 
  62.         text-align:center; 
  63.         float:left; 
  64.         margin-left:2px; 
  65.     } 
  66.     #btn span.hover{ 
  67.         background:#e77402; 
  68.     } 

四.引用

  1. $(document).ready(function(){ 
  2.         $("#imgcarousel").imgcarousel({}); 
  3.     }); 

最后附上一效果图

jquery图片轮播插件开发过程_jquery插件