jquery 图片播放器插件（支持自己设定时间，自己设定是否自动播放）

（插件效果图片）

 

 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的文件哦！

posted @ 2013-03-29 16:41  梦飞无颜  阅读(374)  评论(0)    收藏  举报