[fn]焦点图JQ插件版

自己写的焦点图片的插件，使用方法简单说明一下

index.html页面具体结构如下

 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 <link href="css/qxjt.css" rel="stylesheet" type="text/css" />
 7 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 8 <script type="text/javascript" src="js/foursFn.js"></script>
 9 </head>
10 
11 <body>
12     <div class="fours">
13         <div class="srcollImg">
14             <div class="srcollBox" id="srcollBox">
15                 <ul>
16                     <li><img src="images/fours_1.jpg" alt="" /></li>
17                     <li style="display:none;"><img src="images/fours_2.jpg" alt="" /></li>
18                     <li style="display:none;"><img src="images/fours_3.jpg" alt="" /></li>
19                     <li style="display:none;"><img src="images/fours_4.jpg" alt="" /></li>
20                     <li style="display:none;"><img src="images/fours_5.jpg" alt="" /></li>
21                 </ul>
22                 <div class="state">
23                     <p>1</p>
24                     <p>2</p>
25                     <p>3</p>
26                     <p>4</p>
27                     <p>5</p>
28                 </div>
29                 <ol>
30                     <!-- <li></li> -->
31                 </ol>
32                 <span class="prev"></span>
33                 <span class="next"></span>
34             </div>
35         </div>
36     </div>
37     </body>
38 </html>

qxjt.css如下

 1 *{ padding:0; margin:0;} 
 2 body{ font:400 15px/21px "Microsoft YaHei"; color:#2a363c; background:#000;}
 3 fieldset,img { border:0; } 
 4 ol,ul { list-style:none; } 
 5 caption,th { text-align:left; } 
 6 .fixfloat:after{content:".";display:block;clear:both;visibility:hidden;height:0;}
 7 .fixfloat{zoom:1}
 8 
 9 .fours{height:424px;}
10 .fours .srcollImg{ width:846px; height:307px; padding-top:20px; margin:100px auto; background:url(../images/jd_bg.gif) no-repeat;}
11 .fours .srcollImg .srcollBox{position:relative; width:805px; height:286px; overflow:hidden; margin:0 auto;}
12 .fours .srcollImg .srcollBox .prev{position:absolute; top:126px; left:0; width:22px; height:35px; background:url(../images/prev.png); cursor:pointer; z-index:9;}
13 .fours .srcollImg .srcollBox .next{position:absolute; top:126px; right:0; width:22px; height:35px; background:url(../images/next.png); cursor:pointer; z-index:9;}
14 .fours .srcollImg .srcollBox ol{position:absolute; bottom:10px; left:22px; z-index:9;}
15 .fours .srcollImg .srcollBox ol li{float:left; width:21px; height:21px; margin-right:5px; overflow:hidden; background:#fff; text-align:center; -moz-border-radius:11px; -webkit-border-radius:11px; border-radius:11px;}
16 .fours .srcollImg .srcollBox ol li.on{background:#7f7c7c;}
17 .fours .srcollImg .srcollBox ul{position:absolute; top:0; left:0; z-index:1;}
18 .fours .srcollImg .srcollBox .state{position:absolute; bottom:0; left:0; width:100%; height:40px; background:rgba(0,0,0,.7); z-index:5;}
19 .fours .srcollImg .srcollBox .state p{padding:0 15px; color:#fff; line-height:40px; text-align:right;}

首先引入jq的文件

然后引入插件文件foursFn.js

 1 $.fn.foursFn = function (opt) {
 2     opt = $.extend({
 3         isTab: true, 
 4         isTabNum: false, 
 5         tabClassName: 'on',
 6         isState: true, 
 7         stateClassName: '.state',
 8         isPage: true, 
 9         oPrev: '.prev',
10         oNext: '.next',
11         timer: 1500
12     }, opt);
13 
14     return this.each(function() {
15         var $this = $(this);
16         var iFousId = 0;
17         var oS_con =$this.find('ul li');
18         var oS_prev = $this.find(opt.oPrev);
19         var oS_next = $this.find(opt.oNext);
20         var oS_nav = $this.find('ol');
21         var oS_state = $this.find(opt.stateClassName);
22         var moonTime = setInterval(InterTime, opt.timer);
23 
24         if (opt.isTab && oS_nav.size()>0) {
25             oS_nav.empty();
26             for (var i = 0; i < oS_con.size(); i++) {
27                 opt.isTabNum ? oS_nav.append('<li>'+ (i+1) +'</li>') : oS_nav.append('<li></li>');
28             };
29 
30             oS_nav.find('li').eq(0).addClass('on');
31             oS_nav.bind('click', function(ev) {
32                 var ev = ev || window.event;
33                 var target = ev.target || ev.srcElement;
34                 if (target.nodeName.toLowerCase() == "li") {
35                     iFousId = oS_nav.find('li').index(target);
36                     InterTab();
37                 }
38             });
39         }
40         if(opt.isPage && oS_prev.size()>0 && oS_next.size()>0){
41             oS_prev.bind('click', function() {
42                 iFousId--;
43                 if(iFousId < 0){
44                     iFousId = oS_con.size()-1;
45                 }
46                 InterTab();
47             });
48             oS_prev.bind('mouseover', function() {
49                 clearInterval(moonTime);
50             });
51             oS_prev.bind('mouseout', function() {
52                 moonTime = setInterval(InterTime, opt.timer);
53             });
54 
55             oS_next.bind('click', function() {
56                 iFousId++;
57                 if (iFousId >= oS_con.size()) {
58                     iFousId = 0;
59                 } 
60                 InterTab();
61             });
62             oS_next.bind('mouseover', function() {
63                 clearInterval(moonTime);
64             });
65             oS_next.bind('mouseout', function() {
66                 moonTime = setInterval(InterTime, opt.timer);
67             });
68         }
69         function InterTab() {
70             opt.isTab ? oS_nav.find('li').eq(iFousId).addClass('on').siblings().removeClass('on') : '';
71             oS_con.eq(iFousId).fadeIn('slow').siblings().css('display', 'none');
72             opt.isState ? oS_state.children('p').eq(iFousId).fadeIn('slow').siblings().css('display', 'none') : '';
73         } 
74         function InterTime () {
75             InterTab();
76             iFousId++;
77             if (iFousId >= oS_con.size()) {
78                 iFousId = 0;
79             } 
80         }
81     });
82 }

到这里准备工作已ok，了

接下来就是我们调用插件的具体使用，

 1 jQuery(document).ready(function($) {
 2     // 焦点图
 3     $('#srcollBox').foursFn({
 4         isTab: false,
 5         isTabNum: false,
 6         tabClassName: 'on', 
 7         isState: true,
 8         stateClassName: '.state',
 9         isPage: true,
10         oPrev: '.prev', 
11         oNext: '.next', 
12         timer: 1500 
13     });            
14 });

插件foursFn里面有几项参数，我们可以更具实际情况来选择设置

isTab 是否有tab
isTabNum tab里是否显示数字
tabClassName 当前tab的样式
isState 是否有图片说明
stateClassName 图片说明的样式
isPage 是否有上下页
oPrev 上一页的样式
oNext 下一页的样式
timer 图片切换时间

假如不用上下页，我们就需要把isPage设置为flase，并要在html页面里把相应的标签删除掉。

只要保证大体结构变，插件就可以正常运行！