[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标签.和 ...

随机推荐

异常：Message 850 not found; No message file for product=network, facility=NL解决方案
一.异常信息: Message 850 not found; No message file for product=network, facility=NL 二.解决方案: 后来在 ...
APP自适应的例子
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" ...
mysql存储过程简介
创建存储过程CREATE PROCEDURE productpricing(OUT pl DECIMAL(8,2),OUT ph DECIMAL(8,2),OUT pa DECIMAL(8,2))BE ...
Scala class的构造方法与继承
有java背景的人,很清楚java是如何定义构造方法以及继承的.在scala里面,继承和java有些相似.但是构造方法的定义,就不大一样了,应该说是差别还是很大的.在java里面,定义构造方法,就是定 ...
移动端WEB开发，click,touch,tap事件浅析
一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
SQL中使用update inner join和delete inner join
Update XXX set XXX where 这种写法大家肯定都知道,才发现update和delete居然支持inner join的update方式,太神奇了.分享段示例代码: 1 2 3 4 5 ...
EAS linux挂载数据盘
查看数据盘名称 fdisk -l 假设没有挂载的数据盘为/dev/xvdb 格式化数据盘 mkfs.ext3 /dev/xvdb 添加自动挂载 mkdir /data echo '/dev/xvdb ...
PLAN表
用得较多的PLAN表有以下三个ABPPMGR:MANUFACTURINGPLN.SHIPMENTPLAN.PROCUREMENTPLAN .这三个表都是执行StartFP中的exportFP进行数据导 ...
asdsa
ML_运营一部数据平台应用服务组 <ML_1731@pingan.com.cn> epcischagentdailyreportkb copy from OLAPSEL/frt9iora@ ...
windows 系统下 Firefox hostadmin插件无法修改Host
firefox hostAdmin插件无法修改Host了,提示“ write hosts file failed check permissions”,肯定是权限出现了问题??? 使用管理员权限打开c ...

[fn]焦点图JQ插件版

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

随机推荐

热门专题