最近学习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 src="images/1.jpg"></a> <a href="#nogo"><img src="images/2.jpg"></a> <a href="#nogo"><img src="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; }四.引用
$(document).ready(function(){
$("#imgcarousel").imgcarousel({});
});