[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标签.和 ...
随机推荐
- UIAutomator 编译
环境搭建 1.必备条件: 1.JDK 2.SDK(API高于15) 3.Eclipse(安装ADT插件) 4.ANT(用于编译生成jar) 2.简要步骤: 1.安装JDK并添加环境变 ...
- CSS 块状元素和内联元素的详解
我们先来分析一下块级元素.内联级元素的定义和解析: 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...
- 【转载】C++ function、bind和lambda表达式
本篇随笔为转载,原贴地址:C++ function.bind和lambda表达式. 本文是C++0x系列的第四篇,主要是内容是C++0x中新增的lambda表达式, function对象和bind机制 ...
- CentOS7服务器相关配置
====================查看CentOS版本==================== cat /etc/redhat-release ====================YUM更新 ...
- brackets快捷键使用
ctrl+b 当选中一个文本时,会出现相同的文本,被高亮显示 按ctrl+b 相同的文本就全部获得了焦点 这样就可以同时更改这些相同的文本ctrl+e 打开或关闭快速编辑alt+u 注释ctrl ...
- kali 虚拟机开启mysql:3306 供主机访问.
mysql -u root -p use mysql; update user set host='ip' where user='root'; //更新访问权限 flush privileges; ...
- AngularJS 中设置 AJAX get 请求不缓存的方法
var app = angular.module('manager', ['ngRoute']); app.config(['$routeProvider', function($routeProvi ...
- Java值传递和引用传递详细解说
前天在做系统的时候被Java中参数传递问题卡了一下,回头查阅了相关的资料,对参数传递问题有了新的了解和掌握,但是有个问题感觉还是很模糊,就是 Java中到底是否只存在值传递,因为在查阅资料时,经常看到 ...
- socket编程相关的结构体和字节序转换、IP、PORT转换函数
注意:结构体之间不能直接进行强制转换, 必须先转换成指针类型才可以进行结构体间的类型转换, 这里需要明确的定义就是什么才叫强制转换. 强制转换是将内存中一段代码以另一种不同类型的方式进行解读, 因此转 ...
- c# SqlHelper Class
using System;using System.Collections;using System.Collections.Generic;using System.Data;using Syste ...