[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标签.和 ...
随机推荐
- sed 命令及shell的if语句的运用实例
if [ -f /etc/syslog.conf ]; #判断文件是否存在thensystest=`sed -n '/^auth.info/p' /etc/syslog.conf`; ...
- 主机+虚拟机ubuntu+mini2440开发板互相ping通
折腾这么久,终于将主机,虚拟机和开发板三者之间能够相互ping通,虽然还没有实现我要的功能,不管怎么说先将步骤简单的概括下,用交叉网线将开发板与主机相连,开发板与主机的ip要设置在同一网段内,在配置u ...
- TortoiseSVN-1.8.11 安装时弹出2503错误导致安装失败解决办法
这个问题主要是由于msi格式文件在win8中默认不是以管理员身份运行造成,可通过命令行解决: 右键单击win8左下角启动图标,选择命令提示符(管理员): 输入:msiexec /package 要安装 ...
- c++学习笔记——字面值常量类
字面值常量类:数据成员都是字面值类型的聚合类是字面值常量类.如果一个类不是聚合类,但是它符合一下要求,则它也是个字面值常量类: 1.数据成员都必须是字面值类型. 2.类必须至少含有一个constexp ...
- 6.Mybatis中的动态Sql和Sql片段（Mybatis的一个核心）
动态Sql是Mybatis的核心,就是对我们的sql语句进行灵活的操作,他可以通过表达式,对sql语句进行判断,然后对其进行灵活的拼接和组装.可以简单的说成Mybatis中可以动态去的判断需不需要某些 ...
- Mahout源码分析之 -- QR矩阵分解
一.算法原理 请参考我在大学时写的<QR方法求矩阵全部特征值>,其包含原理.实例及C语言实现:http://www.docin.com/p-114587383.html 二.源码分析 这里 ...
- [原创]使用Pandoc实现Markdown文件转PDF文件
Markdown写法简单明快,我十分喜欢,以至于我最近都想使用Markdown快速的进行测试说明书的写作,但是考虑到这文档是要进行交接的,一个.md的文件在内部传输还是有不便,于是就想到了能不能把Ma ...
- ajax无刷新上传图片
页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- static关键字用法
java中static关键字可用于修饰: 1.属性:表示该属性变量在类被加载时即被创建并初始化,类加载过程只进行一次,因此静态变量也只被创建一次 2.方法:静态方法为类的公有方法,可直接用‘类名.方法 ...
- redis学习（二） Redis Hash
Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). redis ...