首页 > 代码库 > [fn]焦点图JQ插件版
[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: 150012 }, 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页面里把相应的标签删除掉。
只要保证大体结构变，插件就可以正常运行！
[fn]焦点图JQ插件版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。