（插件效果图片）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 .bimg{ width:300px; height:250px; position: relative;background: #FFF; overflow:hidden} 8 .bimg .btn{ height:11px; padding:0 5px; background:#CCC; position:absolute; bottom:10px; right:20px; } 9 .bimg .btn ul{ margin:0; padding:0; list-style:none} 10 .bimg .btn ul li{ float:left; height:11px; width:10px; margin:0 5px;background:url(images/video_all.gif) no-repeat; cursor:pointer} 11 .bimg .btn ul .current{background: url(images/ico_focus_num_current.gif) no-repeat } 12 .bimg .bimgbox{ width:300px; height:250px;} 13 .bimg .bimgbox img{ border:0; display:none} 14 .bimg .txt{ width:300px; height:40px; line-height:40px; background:#000000; position:absolute; bottom:0; left:0} 15 .bimg .txt p{ height:40px; line-height:40px; font-size:18px; font-weight:bolder; text-align:left; color:#FFF; display:none; margin:0; padding:0} 16 .bimg .txt p a{ color:#FFFFFF; text-decoration:none} 17 .bimg .txt p a:hover{ text-decoration:underline} 18 19 </style> 20 21 <script type="text/javascript" src="jquery-1.7.2.min.js" ></script> 22 <script type="text/javascript" src="图片播放插件.js" ></script> 23 <script type="text/javascript"> 24 25 $(function(){ 26 $("#imgbox").imgUI({ 27 tims:3000, 28 play:"auto", 29 btnclass:"current" 30 }) 31 }) 32 </script> 33 34 </head> 35 36 <body> 37 38 <div id="imgbox" class="bimg"> 39 40 <div class="bimgbox"> 41 <a href="#"> <img src="images/11.jpg" width="300" height="250" /></a> 42 <a href="#"> <img src="images/12.jpg" width="300" height="250" /></a> 43 <a href="#"> <img src="images/13.jpg" width="300" height="250"/></a> 44 <a href="#"> <img src="images/14.jpg" width="300" height="250" /></a> 45 <a href="#"> <img src="images/15.jpg" width="300" height="250" /></a> 46 47 </div> 48 <div class="txt"> 49 <p><a href="#">易车网用户体验部1</a></p> 50 <p><a href="#">易车网用户体验部2</a></p> 51 <p><a href="#">易车网用户体验部3</a></p> 52 <p><a href="#">易车网用户体验部4</a></p> 53 <p><a href="#">易车网用户体验部5</a></p> 54 </div> 55 56 <div class="btn"> 57 <ul> 58 <li><img src="images/11.jpg" width="63" height="48" /></li> 59 <li></li> 60 <li ></li> 61 <li></li> 62 <li></li> 63 64 </ul> 65 </div> 66 67 68 </div> 69 70 </body> 71 </html>
1 /************************** 2 =======2012-10-23 ccm======== 3 图片播放器插件 4 默认为自动播放，时间间隔为3秒 5 btnclass 为按钮选中样式，默认名称为current 6 7 **************************/ 8 (function($){ 9 $.fn.imgUI=function(option){ 10 var defaults={ 11 tims:3000, 12 play:"auto", 13 btnclass:"current" 14 } 15 var option=$.extend(defaults,option); 16 return this.each(function(){ 17 var ind=0,index=0; 18 var timers; 19 var btnlist=$(this).find("li"); 20 var imglist=$(this).find("img"); 21 var textlist=$(this).find("p"); 22 var imgthis=$(this); 23 btnlist.eq(index).addClass(option.btnclass); 24 textlist.eq(index).show(); 25 imglist.eq(index).fadeIn(); 26 btnlist.each(function(index){ 27 btnlist.eq(index).bind("mouseover",function(){ 28 img_bf_box(index); 29 ind=index; 30 }); 31 imgthis.bind("mouseover",function(){clearInterval(timers);}); 32 imgthis.bind("mouseout",function(){ 33 if(option.play=="auto"){ 34 clearInterval(timers); 35 timer(); 36 } 37 }) 38 }); 39 if(option.play=="auto"){ timer(); } 40 function timer(){ 41 timers=setInterval(function(){ 42 if(ind<btnlist.length-1){ind=ind+1;}else{ind=0}; 43 img_bf_box(ind) 44 } ,option.tims); 45 } 46 function img_bf_box(index){ 47 imglist.hide(); 48 textlist.hide(); 49 btnlist.removeClass(option.btnclass); 50 btnlist.eq(index).addClass(option.btnclass); 51 textlist.eq(index).show(); 52 imglist.eq(index).fadeIn(); 53 //ind=index; 54 } 55 }) 56 } 57 58 })(jQuery)
前往别忘了引入jquery的文件哦！