jQuery插件之：图片切换
今天下午写了这个图片切换的jQuery插件，点击下载,它能由用户设置图片切换的模式，目前支持两种：fadein(渐入渐出)和scroll(从右向左)
用法(example)：
1 $("div.img").picShow({
2 imgPath : 'img/', //图片路径，默认为 images/ 图片名称以数排序命名：1.jpg,2.jpg,3.jpg……
3 width : 500,
4 height : 250,
5 number : 4, //图片数量
6 time : 3, //图片移动时间间隔，单位为s
7 mode : 'scroll' //fadein:图片渐入渐出 or scroll：图片滚动
8 });
Html:
1 <div class="img"></div>
CSS:
base.css
1 /*global*/
2 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, a, blockquote, th { margin: 0;padding: 0;}
3 h1, h2, h3, h4, h5, h6 { font-size: 100%; }
4 ol, ul { list-style: none; }
5 table {border-collapse: collapse;border-spacing: 0px;}
6 fieldset, img { border: 0; }
7 body {margin:0px auto 0px; color:#000000;font: 12px "宋体", Arial, "黑体"; background-color:#FFFFFF;}
8 html{ height:100%; width:100%; }
9 *html body {background-image:url(about:blank);background-attachment:fixed;} /* IE6 fixed box hack */
10 /*清除浮动 start*/
11 .clearfix:after {content:".";display:block;height:0;clear:both; visibility:hidden;}
12 .clearfix { display:inline-block; }
13 * html .clearfix { height:1%; }
14 .clearfix { display:block; }
插件css:
#picshow{position:absolute; left:100px; top:90px; overflow:hidden; box-shadow:0px 0px 10px #666;}
#picshow ul li{position:absolute; left:0px; top:0px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; }
#picshow ul li.cur{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; z-index:100;}
.num{position:absolute; right:10px; bottom:10px; z-index:200;}
.num a{display:inline-block; padding:1px 5px; background:#fff; text-decoration:none; color:#000; border:1px solid #ccc; margin-left:5px;}
.num a:hover{background:#f00; color:#fff; border:1px solid #f00;}
.num a.hover{background:#f00; color:#fff; border:1px solid #f00;}
Js插件代码:
1 //picShow
2 (function(){
3 $.fn.picShow = function(options){
4 var _this = $(this);
5 var defaults = {
6 imgPath : 'images/', //图片路径，默认为 images/
7 width : 500,
8 height : 250,
9 number : 3, //图片数量
10 time : 3, //图片移动时间间隔，单位为s
11 mode : 'fadein' //fadein:图片渐入渐出 or scroll：图片滚动
12 }
13 var opts = $.extend(defaults,options);
14
15 //html代码
16 var wrap = '<div id="picshow"><ul></ul><div class="num"></div></div>';
17
18 //插入代码
19 _this.append(wrap);
20
21 $("#picshow").css({
22 width : opts.width + 'px',
23 height : opts.height + 'px'
24 });
25
26 //插入图片
27 for(var i=1; i <= opts.number; i++){
28 var pic = '<li><a href="#"><img src="' + opts.imgPath + i + '.jpg" alt="pic' + i + '" width="' + opts.width + '" height="' + opts.height + '" /></a></li>',
29 nav = '<a href="#" order="' + i + '">' + i + '</a>';
30 $("#picshow").find("ul").append(pic);
31 $("#picshow").find("div.num").append(nav);
32 if(i == 1){
33 $("#picshow ul li").addClass("cur");
34 $("#picshow div.num a").addClass("hover");
35 }
36 }
37
38 function COMMON(){
39 var movepic = setInterval(function(){
40 var nowpic = $("#picshow ul li.cur").index(),
41 nextpic = nowpic + 1;
42 if(nowpic == opts.number - 1){
43 nextpic = 0;
44 }
45 changePic(nowpic,nextpic);
46 },opts.time*1000);
47
48 $("#picshow div.num a").click(function(){
49 clearInterval(movepic);
50 var nowpic = $("#picshow ul li.cur").index(),
51 nextpic = $(this).index();
52 changePic(nowpic,nextpic);
53 });
54 }
55
56 switch(opts.mode){
57 case 'fadein':
58 function changePic(nowpic,nextpic){
59 $("#picshow div.num a").eq(nextpic).addClass("hover");
60 $("#picshow ul li").eq(nowpic).animate({'opacity':'0'},700,function(){
61 $("#picshow div.num a").eq(nowpic).removeClass("hover");
62 }).removeClass("cur");
63 $("#picshow ul li").eq(nextpic).animate({'opacity':'1'},700,function(){}).addClass("cur");
64 }
65 COMMON();
66 break;
67 case 'scroll':
68 function changePic(nowpic,nextpic){
69 $("#picshow ul li").eq(nextpic).css({'left':opts.width + 'px','opacity':'1'});
70 $("#picshow ul li").eq(nowpic).animate({'left':-opts.width + 'px'},500,function(){
71 $(this).removeClass("cur");
72 $("#picshow div.num a").eq(nextpic).addClass("hover");
73 });
74 $("#picshow ul li").eq(nowpic).css({'left':'0px'});
75 $("#picshow ul li").eq(nextpic).animate({'left':'0px'},500,function(){
76 $(this).addClass("cur");
77 $("#picshow div.num a").eq(nowpic).removeClass("hover");
78 });
79 }
80 COMMON();
81 break;
82 default:
83 alert('"mode"参数错误!');
84 break;
85 }
86 }
87 })(jQuery);
总结：
图片标识（右下角的1,2,3,4……）切换还不够自然，待改进……
