[fn]焦点图JQ插件版

时间：2023-03-09 19:12:03
[fn]焦点图JQ插件版

[fn]焦点图JQ插件版

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

index.html页面具体结构如下

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>百合网专题</title>

 <link href="css/qxjt.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

 <script type="text/javascript" src="js/foursFn.js"></script>

 </head>

 <body>

     <div class="fours">

         <div class="srcollImg">

             <div class="srcollBox" id="srcollBox">

                 <ul>

                     <li><img src="data:images/fours_1.jpg" alt="" /></li>

                     <li style="display:none;"><img src="data:images/fours_2.jpg" alt="" /></li>

                     <li style="display:none;"><img src="data:images/fours_3.jpg" alt="" /></li>

                     <li style="display:none;"><img src="data:images/fours_4.jpg" alt="" /></li>

                     <li style="display:none;"><img src="data:images/fours_5.jpg" alt="" /></li>

                 </ul>

                 <div class="state">

                     <p>1</p>

                     <p>2</p>

                     <p>3</p>

                     <p>4</p>

                     <p>5</p>

                 </div>

                 <ol>

                     <!-- <li></li> -->

                 </ol>

                 <span class="prev"></span>

                 <span class="next"></span>

             </div>

         </div>

     </div>

     </body>

 </html>

qxjt.css如下

 *{ padding:; margin:;}

 body{ font:400 15px/21px "Microsoft YaHei"; color:#2a363c; background:#000;}

 fieldset,img { border:; }

 ol,ul { list-style:none; }

 caption,th { text-align:left; }

 .fixfloat:after{content:".";display:block;clear:both;visibility:hidden;height:;}

 .fixfloat{zoom:}

 .fours{height:424px;}

 .fours .srcollImg{ width:846px; height:307px; padding-top:20px; margin:100px auto; background:url(../images/jd_bg.gif) no-repeat;}

 .fours .srcollImg .srcollBox{position:relative; width:805px; height:286px; overflow:hidden; margin:0 auto;}

 .fours .srcollImg .srcollBox .prev{position:absolute; top:126px; left:; width:22px; height:35px; background:url(../images/prev.png); cursor:pointer; z-index:;}

 .fours .srcollImg .srcollBox .next{position:absolute; top:126px; right:; width:22px; height:35px; background:url(../images/next.png); cursor:pointer; z-index:;}

 .fours .srcollImg .srcollBox ol{position:absolute; bottom:10px; left:22px; z-index:;}

 .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;}

 .fours .srcollImg .srcollBox ol li.on{background:#7f7c7c;}

 .fours .srcollImg .srcollBox ul{position:absolute; top:; left:; z-index:;}

 .fours .srcollImg .srcollBox .state{position:absolute; bottom:; left:; width:100%; height:40px; background:rgba(0,0,0,.7); z-index:;}

 .fours .srcollImg .srcollBox .state p{padding:0 15px; color:#fff; line-height:40px; text-align:right;}

首先引入jq的文件

然后引入插件文件foursFn.js

 $.fn.foursFn = function (opt) {

     opt = $.extend({

         isTab: true,

         isTabNum: false,

         tabClassName: 'on',

         isState: true,

         stateClassName: '.state',

         isPage: true,

         oPrev: '.prev',

         oNext: '.next',

         timer: 1500

     }, opt);

     return this.each(function() {

         var $this = $(this);

         var iFousId = 0;

         var oS_con =$this.find('ul li');

         var oS_prev = $this.find(opt.oPrev);

         var oS_next = $this.find(opt.oNext);

         var oS_nav = $this.find('ol');

         var oS_state = $this.find(opt.stateClassName);

         var moonTime = setInterval(InterTime, opt.timer);

         if (opt.isTab && oS_nav.size()>0) {

             oS_nav.empty();

             for (var i = 0; i < oS_con.size(); i++) {

                 opt.isTabNum ? oS_nav.append('<li>'+ (i+1) +'</li>') : oS_nav.append('<li></li>');

             };

             oS_nav.find('li').eq(0).addClass('on');

             oS_nav.bind('click', function(ev) {

                 var ev = ev || window.event;

                 var target = ev.target || ev.srcElement;

                 if (target.nodeName.toLowerCase() == "li") {

                     iFousId = oS_nav.find('li').index(target);

                     InterTab();

                 }

             });

         }

         if(opt.isPage && oS_prev.size()>0 && oS_next.size()>0){

             oS_prev.bind('click', function() {

                 iFousId--;

                 if(iFousId < 0){

                     iFousId = oS_con.size()-1;

                 }

                 InterTab();

             });

             oS_prev.bind('mouseover', function() {

                 clearInterval(moonTime);

             });

             oS_prev.bind('mouseout', function() {

                 moonTime = setInterval(InterTime, opt.timer);

             });

             oS_next.bind('click', function() {

                 iFousId++;

                 if (iFousId >= oS_con.size()) {

                     iFousId = 0;

                 }

                 InterTab();

             });

             oS_next.bind('mouseover', function() {

                 clearInterval(moonTime);

             });

             oS_next.bind('mouseout', function() {

                 moonTime = setInterval(InterTime, opt.timer);

             });

         }

         function InterTab() {

             opt.isTab ? oS_nav.find('li').eq(iFousId).addClass('on').siblings().removeClass('on') : '';

             oS_con.eq(iFousId).fadeIn('slow').siblings().css('display', 'none');

             opt.isState ? oS_state.children('p').eq(iFousId).fadeIn('slow').siblings().css('display', 'none') : '';

         }

         function InterTime () {

             InterTab();

             iFousId++;

             if (iFousId >= oS_con.size()) {

                 iFousId = 0;

             }

         }

     });

 }

到这里准备工作已ok，了

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

 jQuery(document).ready(function($) {

     // 焦点图

     $('#srcollBox').foursFn({

         isTab: false,

         isTabNum: false,

         tabClassName: 'on',

         isState: true,

         stateClassName: '.state',

         isPage: true,

         oPrev: '.prev',

         oNext: '.next',

         timer: 1500

     });

 });

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

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

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

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

相关文章