[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标签.和 ...
随机推荐
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- Ubuntu中启用关闭Network-manager网络设置问题！
Ubuntu中启用关闭Network-manager网络设置问题! [Server版本] 在UbuntuServer版本中,因为只存有命令行模式,所以要想进行网络参数设置,只能通过修改/etc/net ...
- Spark SQL External Data Sources JDBC官方实现读测试
在最新的master分支上官方提供了Spark JDBC外部数据源的实现,先尝为快. 通过spark-shell测试: import org.apache.spark.sql.SQLContext v ...
- 基于Linux 的VM TOOLS Install
VMware Tools Install 在VMware中为Linux系统安装VM-Tools的详解教程 如果大家打算在VMware虚拟机中安装Linux的话,那么在完成Linux的安装后,如果没 ...
- 通知 Notification
1. NotificationManager ma=(NotificationManager) context.getSystemService(context.NOTIFICATION_SERVIC ...
- glReadPixels函数
GPU渲染完数据在显存,回传内存的唯一方式glReadPixels函数... glReadPixels:读取一些像素.当前可以简单理解为“把已经绘制好的像素(它可能已经被保存到显卡的显存中)读取到内存 ...
- TJI读书笔记11-多态
TJI读书笔记11-多态 再说说向上转型 多态的原理 构造器和多态 协变返回类型 使用继承进行设计 多态是数据抽象和继承之后的第三种基本特征. 一句话说,多态分离了做什么和怎么做(再次对埃大爷佩服的五 ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- {C#}{GDI+}各种C#，GDI+的资料
GDI+各种功能: http://www.cnblogs.com/08shiyan/category/253906.html 字体:http://blog.sina.com.cn/s/blog_7c7 ...
- jquery表格增加删除后改变序号
有个小bug,懒得修了. 目的:增加一行的时候,td第一列排序. 删除一行的时候,td第一列排序 <!DOCTYPE HTML> <html> <head> < ...