[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标签.和 ...
随机推荐
- AX 2012 EP服务器配置多个环境
AX 2012 如何在一台服务器配置不同环境的EP站点 安装完EP后,修改对应站点的web.config文件,指定需要连接的客户端配置文件路径即可,如下图: ` ``````````````````` ...
- jquery遍历的radio的取值问题
html页面:<c:if test="${courseStandardVos != null }"> <c:set var="index" v ...
- 一个最小化的SpringBoot项目
项目结构 项目基于Maven管理,注意使用了父pom <parent> <groupId>org.springframework.boot</groupId> &l ...
- 碎片事物的提交 commitAllowingStateLoss()
转:http://blog.csdn.net/kaiqiangzhang001/article/details/42241441 下边两个问题,是在开发中碰到的一些关于Fragment的偶发性的问题, ...
- win7出现无法连接到代理服务器的错误，不能上网的问题的解决
今天晚上突然停电,等我打开电脑发现不然上网,用google浏览器出现这个错误: 用IE诊断错误如下: 说是不能连到代理服务器,但是我没有连接到代理服务器啊,但是我的QQ能登,就是不能用浏览器上网,经过 ...
- Reprot中的五个Trigger说明
Report Trigger 1.1 Which report trigger to use As a general rule, any processing that will affect th ...
- linux上安装配置vsftpd
启动: /usr/sbin/vsftpd & 端口占用: lsof -i:21 位置: whereis vsftpd 默认配置下,匿名用户登录 vsftpd 服务后的根目录是 /var/ftp ...
- Visual Studio 换皮肤
通过字体和颜色修改 Visual Studio 提供了修改配色的入口,你完全可以根据自己的喜好进行自定义,下面就通过该方法把编辑器背景设置成 “豆沙绿”. 选择 工具 / 选项 / 环境 / 字体和颜 ...
- Python全栈开发day3
1.Pycharm使用介绍 1.1 新建py文件自动添加python和编码 1.2 更改pycharm默认字体和风格 点击左上角“file”-->“Settings”(或者用“Ctrl+Alt+ ...
- Unity协程（Coroutine）原理深入剖析
Unity协程(Coroutine)原理深入剖析 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 其实协程并没有那么复杂,网上很多地方都说是多 ...