[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页面里把相应的标签删除掉。

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

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

首页焦点图myFocus插件
首页焦点图myFocus插件 myFocus特性小巧却高效强大 myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~ 极其 ...
基于jq流畅度非常好的图片左右切换焦点图
今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: &l ...
JQ插件之imgAreaSelect实现对图片的在线截图功能（java版）
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
jq插件处女座图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说上代码 (function($) { $.fn ...
jq插件第二款来袭图片滚动
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...
移动web：图片切换(焦点图)
在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

随机推荐

DATAGUARD 添加修改REDOLOG大小
DG在线日志组大小修改环境(单实例,Centos 6.5 X64,oracle 10.2.0.5,filesystem存储) REDO ONLINE LOG select * from v$logf ...
AX2012 referencegroup
用referencegroup 1.添加EDT,refrecid 2.修改autoidentification 3. 可以直接拖refrecid字段出来,就是referencegroup了
LoadRunner使用技巧之添加事务
事务(Transaction)用于模拟用户的一个相对完整的.有意义的业务操作过程,例如登录.查询.交易.转账,这些都可以作为事务,而一般不会把每次HTTP请求作为一个事务. 以刚刚过去的双11淘宝为例 ...
mac java目录
/Library/Java/JavaVirtualMachines/jdk1.7.0_10.jdk/Contents/Home mac java的安装目录为 /Library/Java/JavaVir ...
HTML4.01和XHTML1.0和XHTML1.1的一些区别
接触web前端以来,一直使用的都是html5,因此一直没搞明白HTML4.01和XHTML1.0和XHTML1.1之间的区别,今天在看<精通CSS>一书,有简单介绍这几个,在这儿记录下. ...
SQL Server添加MDW性能监控报表(转载)
10.2 Data Collector与MDW Data Collection功能是SQL SERVER 2005版本提供的数据库监控报表的功能,通过定时地对数据库的语句运行情况,服务器各种资源的监控 ...
HttpURLConnection下载图片的两种方式
public class MainActivity extends AppCompatActivity { private ImageView iv; private String imageurl ...
eclipse 删除所有注释及空白行
Ctrl+F 删除java注释: /\*{1,2}[\s\S]*?\*/ Ctrl+F 删除xml注释: <!-[\s\S]*?--> Ctrl+F 删除空白行: ^\s*\n 选 ...
C#中combobox 控件属性、事件、方法
一 .combobox 属性.事件.方法公共属性名称说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...
CSS3 display：flex和display：box有什么区别
父级元素有display:box;属性之后.他的子元素里面加上box-flex属性.可以让子元素按照父元素的宽度进行一定比例的分占空间. 如: html: <article> < ...

[fn]焦点图JQ插件版

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

随机推荐

热门专题