自己写的焦点图片的插件，使用方法简单说明一下
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页面里把相应的标签删除掉。
只要保证大体结构变，插件就可以正常运行！