jquery图片轮播插件开发过程

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

一.确定DOM结构。

<div id="imgcarousel">         <div id="carouselnav">             <ul>                 <li>沿着江山起起伏</li>                 <li>伏温柔的曲线</li>                 <li>珍惜苍天赐给我的金色的华年</li>             </ul>             <div id="btn">                 <span>1</span>                 <span>2</span>                 <span>3</span>             </div>         </div>          <div id="carouselcont">             <a href="#nogo"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg"></a>             <a href="#nogo"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg"></a>             <a href="#nogo"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg"></a>         </div>          </div>

二.然后开始写功能。

(function($){     $.fn.imgcarousel=function(options){         var defaults={                      //这里本来是想写一CSS样式的，但是考虑到可以把CSS写到单独的文件中，而不必这么复杂，所以放弃了                  };         var opts=$.extend(defaults,options);         this.each(function(){             var carousel=$(this);                                       //获取到这个模块             var index=0;             var indexnum=carousel.find("#btn span").length;                          var time=3000;             carousel.find("#carouselcont img").eq(0).show();            //默认显示第一个图片                                                                                          carousel.find("#carouselnav li").eq(0).show();              // 默认显示第一条信息             carousel.find("#carouselnav span").eq(0).addClass("hover"); //当鼠标移动到按钮上进，显示对应的图片和信息              carousel.find("#carouselnav span").mouseover(function(){                 var index=carousel.find("#carouselnav span").index($(this));                 showImg(index);                          });             carousel.hover(function(){                                  //鼠标移动到模块上，停止播放                 if(myTime){                     clearInterval(myTime);                 }             },function(){                                               //鼠标移开则继续播放                 myTime=setInterval(function(){                     showImg(index);                     index++;                     if(index==indexnum){                         index=0;                     }                 },time                 );                                  }                                           );             var myTime=setInterval(function(){                          //默认自动播放图片                              showImg(index);                     index++;                     if(index==indexnum){                         index=0;                     }                 },time);                                            var showImg=function(i){                                    //这里是这个插件的主要方法，用来实现图片的显示                 carousel.find("#carouselcont img")                     .eq(i).stop(true,true).fadeIn(800)                     .parent().siblings().find("img").hide();                 carousel.find("#carouselnav li")                     .eq(i).stop(true,true).fadeIn(800)                     .siblings().hide();                 carousel.find("#btn span")                     .eq(i).addClass("hover")                     .siblings().removeClass("hover");             }         });     } })(jQuery);

三.然后可以设计样式。

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 {         margin: 0;         padding: 0;     }     img{         border:none;     }     #imgcarousel{         width:505px;         height:338px;         overflow:hidden;         position:relative;     }     #carouselcont{         z-index:10;          }     #carouselcont img{         width:505px;         height:338px;         display:none;     }     #carouselnav{         position:absolute;         z-index:100;         bottom:0px;         right:0px;         width:505px;         height:22px;         overflow:hidden;         background:#222222;     }     #carouselnav ul{         list-sytle:none;         position:absolute;         left:20px;         width:200px;         display:block;     }     #carouselnav ul li{         color:#fff;         font-size:12px;         font-weight:700;         line-height:22px;         display:block;         width:200px;     }     #btn{         position:absolute;         right:5px;         top:2px;         height:18px;         width:60px;     }     #btn span{         color:#fff;         font-size:12px;         line-height:18px;         background:#666;         width:18px;         display:inline-block;         text-align:center;         float:left;         margin-left:2px;     }     #btn span.hover{         background:#e77402;     }

四.引用

1. $(document).ready(function(){ 

2.         $("#imgcarousel").imgcarousel({}); 
   

3.     });