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

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="data:images/fours_1.jpg" alt="" /></li>
  17.                      <li style="display:none;"><img src="data:images/fours_2.jpg" alt="" /></li>
  18.                      <li style="display:none;"><img src="data:images/fours_3.jpg" alt="" /></li>
  19.                      <li style="display:none;"><img src="data:images/fours_4.jpg" alt="" /></li>
  20.                      <li style="display:none;"><img src="data: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:; margin:;}
  2.  body{ font:400 15px/21px "Microsoft YaHei"; color:#2a363c; background:#000;}
  3.  fieldset,img { border:; }
  4.  ol,ul { list-style:none; }
  5.  caption,th { text-align:left; }
  6.  .fixfloat:after{content:".";display:block;clear:both;visibility:hidden;height:;}
  7.  .fixfloat{zoom:}
  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:; width:22px; height:35px; background:url(../images/prev.png); cursor:pointer; z-index:;}
  13.  .fours .srcollImg .srcollBox .next{position:absolute; top:126px; right:; width:22px; height:35px; background:url(../images/next.png); cursor:pointer; z-index:;}
  14.  .fours .srcollImg .srcollBox ol{position:absolute; bottom:10px; left:22px; z-index:;}
  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:; left:; z-index:;}
  18.  .fours .srcollImg .srcollBox .state{position:absolute; bottom:; left:; width:100%; height:40px; background:rgba(0,0,0,.7); z-index:;}
  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页面里把相应的标签删除掉。

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

[fn]焦点图JQ插件版的更多相关文章

  1. 首页焦点图myFocus插件

    首页焦点图myFocus插件   myFocus特性 小巧却高效强大 myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~ 极其 ...

  2. 基于jq流畅度非常好的图片左右切换焦点图

    今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  3. JQ插件之imgAreaSelect实现对图片的在线截图功能（java版）

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  4. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  5. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  7. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  8. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  9. 移动web：图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

随机推荐

  1. 剑指Offer:面试题23——从上往下打印二叉树(java实现)

    问题描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 按照层次遍历的方法,使用队列辅助. 1.将根结点加入队列. 2.循环出队,打印当前元素,若该结点有左子树,则将其加入队列,若 ...

  2. "A transport-level error has occurred when sending the request to the server"的解决办法

    http://blog.csdn.net/luckeryin/article/details/4337457 最近在做项目时,遇到一个随机发生的异常:"A transport-level e ...

  3. node socket.io web

    soket.io & web http://socket.io/get-started/chat/ 新建一個文件夾 soketWeb ; 在sokertWeb 文件夾內新建一個 package ...

  4. MSsql bcp

    --将test_1表导出在F盘根目录下/ reconfigure EXEC master..xp_cmdshell 'bcp test.dbo.test_1 out f:\abc.txt -c -q ...

  5. weed-fs 基础测试

    =================== 启动 master 端口:9333 =================== sunsl@test-server:~$ weed master I0102 15: ...

  6. linux vim 替换指定字符为回车

    有个问题,想要知道逗号分隔的字符串  example: aaa,bbb,ccc 分隔后的个数 1 将   aaa,bbb,ccc 替换成 aaa bbb ccc 方法: :%s/,/^M/g ^M是用 ...

  7. scala.collection.immutable.HashSet$.empty()Lscala/collection/immutable/HashSet

    最近重新搭了spark环境.在Master上使用了IDEA来写代码.确实很方便.我用的是hadoop2.6.spark1.5.1forhadoop2.6. scala之前用的是2.11.0老是报这个错 ...

  8. 用Jenkins配置自动化构建

     公司培训内容 -------------->记一笔 dubbo 微服务soadiamond-server 配置中心kafka rocketmq消息队列cas-server 单点登录spring ...

  9. 精通 Angular JS 第一天——Angular 之禅

    简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单 ...

  10. Spring 定时执行任务

    好不容易写了半天的文章竟然由于断网而丢失了,并未自动保存到草稿箱.只能简单的贴贴代码了. <?xml version="1.0" encoding="UTF-8&q ...