住趣家居网满屏jQuery焦点图js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是住趣家居网满屏jQuery焦点图js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(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>住趣家居网满屏jQuery焦点图</title>
<link href="css/home.css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/home.js" type="text/javascript"></script>
</head>
<body>
<div class="zq_homeView" id="jobs_home_homeView">
    <div class="zq_pictureBox" node-type="pictureBox">
        <div class="zq_pictures" node-type="pictures">
            <a node-type="picItem" href="#" target="_blank"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>
            <a node-type="picItem" href="#" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a>
            <a node-type="picItem" href="#" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a>
            <a node-type="picItem" href="#" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>
            <a node-type="picItem" href="#" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a>
            <a node-type="picItem" href="#" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a>
            <a node-type="picItem" href="#" target="_blank"><img alt="厨房收纳整理工具" src="images/1.jpg" /></a>
        </div>
        <div class='zq_mask zq_maskLeft' node-type="maskLeft"></div>
        <div class='zq_mask zq_maskRight' node-type="maskRight"></div>
    </div>
    <div class="zq_imgBox">
        <div class="zq_imgs clearfix">
            <a node-type="smallPic" target="_blank" data-index="1" href="#" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a>
            <a node-type="smallPic" target="_blank" data-index="2" href="#"><img alt="清新格子床品" src="images/2.jpg" /></a>
            <a node-type="smallPic" target="_blank" data-index="3" href="#"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a>
            <a node-type="smallPic" target="_blank" data-index="4" href="#"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a>
            <a node-type="smallPic" target="_blank" data-index="5" href="#"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>
        </div>
        <div class="zq_slides">
            <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a>
            <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a>
        </div>
    </div>
</div>
</body>
</html>

JS代码(home.js):

var STK = (function(){
	var that ={
}
;
	var errorList = [];
	that.inc = function(key){
	return true}
;
	that.register = function(ns,maker){
	if (!ns || !maker){
	return false}
var NSList = ns.split(".");
	var step = that;
	var k = null;
	while (k = NSList.shift()){
	if (NSList.length){
	if (step[k] === undefined){
	step[k] ={
}
}
step = step[k]}
else{
	if (step[k] === undefined){
	try{
	step[k] = maker(that)}
catch(exp){
}
}
}
}
}
;
	that.IE = /msie/i.test(navigator.userAgent);
	that.IE6 = /msie 6/i.test(navigator.userAgent);
	that.E = function(id){
	if (typeof id === "string"){
	return document.getElementById(id)}
else{
	return id}
}
;
	that.C = function(tagName){
	var dom;
	tagName = tagName.toUpperCase();
	if (tagName == "TEXT"){
	dom = document.createTextNode("")}
else{
	if (tagName == "BUFFER"){
	dom = document.createDocumentFragment()}
else{
	dom = document.createElement(tagName)}
}
return dom}
;
	that.log = function(str){
	errorList.push("[" + (new Date()).toString() + "]:" + str)}
;
	that.getLogs = function(){
	return errorList}
;
	return that}
)();
	$Import = STK.inc;
	STK.register("core.evt.eventUtil",function(){
	return{
	addEvent:function(el,type,oFunc,sta){
	if (el.attachEvent){
	el.attachEvent("on" + type,oFunc)}
else{
	if (el.addEventListener){
	el.addEventListener(type,oFunc,sta || false)}
else{
	el["on" + type] = oFunc}
}
}
,removeEvent:function(el,type,func,useCapture){
	if (el.removeEventListener){
	el.removeEventListener(type,func,useCapture)}
else{
	if (el.detachEvent){
	el.detachEvent("on" + type,func)}
else{
	el["on" + type] = null}
}
}
}
}
);
	STK.register("core.pageM",function(){
	var evt = STK.core.evt.eventUtil;
	var that ={
}
;
	var nsCache ={
}
;
	var nsList = [];
	that.add = function(ns){
	if (!nsCache[ns]){
	var t = ns.split(".");
	var fn = STK,i = 0;
	do{
	fn = fn[t[i]];
	i++}
while ( i < t . length );
	nsList.push(ns);
	nsCache[ns] = fn}
}
;
	that.start = function(){
	var d;
	for (var i = 0;
	i < nsList.length;
	i++){
	try{
	d = nsList[i];
	if (d){
	nsCache[d] = nsCache[d]()}
else{
	STK.log("start:ns=" + i + ",have not been registed")}
}
catch(e){
	STK.log(e)}
}
}
;
	that.destroy = function(){
	var d;
	while (nsList.length){
	try{
	d = nsList.shift();
	nsCache[d].destroy();
	nsCache[d] = null}
catch(e){
}
}
}
;
	if (!window.jQuery){
	document.addEventListener && evt.addEvent(document,"DOMContentLoaded",that.start);
	document.attachEvent && evt.addEvent(document,"onreadystatechange",that.start);
	evt.addEvent(window,"unload",that.destroy)}
else{
	jQuery(document).ready(that.start);
	jQuery(window).unload(that.destroy)}
return that}
);
	STK.register("core.arr.isArray",function(){
	return function(o){
	return Object.prototype.toString.call(o) === "[object Array]"}
}
);
	STK.register("core.dom.getElementsByAttr",function(){
	return function(node,attrK,attrV){
	if (!node){
	return}
var DOM = [];
	if (document.createNodeIterator){
	var iterator = document.createNodeIterator(node,NodeFilter.SHOW_ELEMENT,null,false);
	var nd = iterator.nextNode();
	while (nd != null){
	if (nd.hasAttribute(attrK)){
	if (attrV){
	nd.getAttribute(attrK) == attrV && DOM.push(nd)}
else{
	DOM.push(nd)}
}
nd = iterator.nextNode()}
}
else{
	for (var i = 0,l = node.childNodes.length;
	i < l;
	i++){
	if (node.childNodes[i].nodeType == 1){
	if (typeof node.childNodes[i].getAttribute(attrK) == "string"){
	if (attrV){
	node.childNodes[i].getAttribute(attrK) == attrV && DOM.push(node.childNodes[i])}
else{
	DOM.push(node.childNodes[i])}
}
if (node.childNodes[i].childNodes.length > 0){
	DOM = DOM.concat(arguments.callee.call(null,node.childNodes[i],attrK,attrV))}
}
}
}
return DOM}
}
);
	STK.register("core.dom.buildDom",function(){
	var getByAttr = STK.core.dom.getElementsByAttr;
	return function(node){
	var ls = getByAttr(node,"node-type");
	var d,DOM ={
}
;
	var len = ls.length;
	var item;
	for (var i = 0;
	i < len;
	i++){
	item = ls[i];
	d = item.getAttribute("node-type");
	if (!DOM[d]){
	DOM[d] = item}
else{
	if (STK.core.arr.isArray(DOM[d])){
	DOM[d].push(item)}
else{
	DOM[d] = [DOM[d]];
	DOM[d].push(item)}
}
}
DOM.parentNode = node;
	return DOM}
}
);
	STK.register("core.evt.getEvent",function(){
	return function(){
	if (STK.IE){
	return window.event}
else{
	if (window.event){
	return window.event}
var o = arguments.callee.caller;
	var e;
	var n = 0;
	while (o != null && n < 40){
	e = o.arguments[0];
	if (e && (e.constructor == Event || e.constructor == MouseEvent || e.constructor == KeyboardEvent)){
	return e}
n++;
	o = o.caller}
return e}
}
}
);
	STK.register("core.evt.fixEvent",function(){
	return function(e){
	e = e || STK.core.evt.getEvent();
	if (!e.target){
	e.target = e.srcElement;
	e.pageX = e.x;
	e.pageY = e.y}
if (/mouseover/.test(e.type) && !e.relatedTarget){
	e.relatedTarget = e.fromElement}
else{
	if (/mouseout/.test(e.type) && !e.relatedTarget){
	e.relatedTarget = e.toElement}
}
if (typeof e.layerX == "undefined"){
	e.layerX = e.offsetX}
if (typeof e.layerY == "undefined"){
	e.layerY = e.offsetY}
if (STK.IE){
	var ver = /msie\s+\d+/i.exec(navigator.userAgent);
	ver && (ver = parseInt(/\d+/.exec(ver[0])));
	if (ver && ver < 9){
	if (e.button == 1){
	e.button = 0;
	e.which = 1}
else{
	if (e.button == 4){
	e.button = 1;
	e.which = 2}
else{
	if (e.button == 2){
	e.button = 2;
	e.which = 3}
}
}
}
}
return e}
}
);
	STK.register("core.arr.indexOf",function(){
	return function(oElement,aSource){
	if (aSource.indexOf){
	return aSource.indexOf(oElement)}
for (var i = 0,len = aSource.length;
	i < len;
	i++){
	if (aSource[i] === oElement){
	return i}
}
return - 1}
}
);
	STK.register("core.arr.inArray",function(){
	return function(oElement,aSource){
	return STK.core.arr.indexOf(oElement,aSource) > -1}
}
);
	STK.register("core.str.trim",function(){
	return function(_str,loc){
	var str = _str || "";
	var rnotwhite = /\S/,l = /^\s+/,r = /\s+$/;
	if (rnotwhite.test("\xA0")){
	l = /^[\s\xA0]+/;
	r = /[\s\xA0]+$/}
str = str.toString();
	return loc == "left" ? str.replace(l,""):(loc == "right" ? str.replace(r,""):str.replace(l,"").replace(r,""))}
}
);
	STK.register("core.json.queryToJson",function(){
	return function(QS,isDecode){
	var _Qlist = STK.core.str.trim(QS).split("&");
	var _json ={
}
;
	var _fData = function(data){
	if (isDecode){
	return decodeURIComponent(data)}
else{
	return data}
}
;
	for (var i = 0,len = _Qlist.length;
	i < len;
	i++){
	if (_Qlist[i]){
	var _hsh = _Qlist[i].split("=");
	var _key = _hsh[0];
	var _value = _hsh[1];
	if (_hsh.length < 2){
	_value = _key;
	_key = "$nullName"}
if (!_json[_key]){
	_json[_key] = _fData(_value)}
else{
	if (STK.core.arr.isArray(_json[_key]) != true){
	_json[_key] = [_json[_key]]}
_json[_key].push(_fData(_value))}
}
}
return _json}
}
);
	STK.register("core.evt.delegatedEvent",function(){
	var eventUtil = STK.core.evt.eventUtil;
	var indexOf = STK.core.arr.indexOf;
	var actEls = [],actElsEvtList = [];
	return function(actEl){
	var that ={
}
,evtList;
	if (!actEl){
	return}
var idx = indexOf(actEl,actEls);
	if (idx == -1){
	actEls.push(actEl);
	idx = actEls.length - 1;
	actElsEvtList[idx] ={
}
}
evtList = actElsEvtList[idx];
	var bindEvent = function(e){
	var evt = STK.core.evt.fixEvent(e);
	var el = evt.target;
	var type = e.type;
	var checkBuble = function(){
	if (evtList[type] && evtList[type][actionType]){
	return evtList[type][actionType]({
	evt:evt,el:el,box:actEl,data:STK.core.json.queryToJson(el.getAttribute("action-data") || "",1)}
)}
else{
	return true}
}
;
	var actionType = null;
	while (el && el !== actEl){
	actionType = el.getAttribute("action-type");
	if (actionType && checkBuble() === false){
	break}
el = el.parentNode}
}
;
	that.add = function(funcName,evtType,process){
	if (!evtList[evtType]){
	evtList[evtType] ={
}
;
	eventUtil.addEvent(actEl,evtType,bindEvent)}
var ns = evtList[evtType];
	ns[funcName] = process}
;
	that.remove = function(funcName,evtType){
	if (evtList[evtType]){
	delete evtList[evtType][funcName];
	if (STK.core.obj.isEmpty(evtList[evtType])){
	delete evtList[evtType];
	eventUtil.removeEvent(actEl,evtType,bindEvent)}
}
}
;
	that.destroy = function(){
	if (actEl){
	evtList = actElsEvtList[indexOf(actEl,actEls)];
	for (k in evtList){
	for (l in evtList[k]){
	delete evtList[k][l]}
delete evtList[k];
	eventUtil.removeEvent(actEl,k,bindEvent)}
return}
for (var i in actElsEvtList){
	evtList = actElsEvtList[i];
	for (k in evtList){
	for (l in evtList[k]){
	delete evtList[k][l]}
delete evtList[k];
	eventUtil.removeEvent(actEl,k,bindEvent)}
}
}
;
	return that}
}
);
	STK.register("jobs.home.homeView",function(){
	return function(){
	var buildDom = STK.core.dom.buildDom;
	var delegate = STK.core.evt.delegatedEvent;
	var handle;
	var node;
	var that ={
	DOM:{
}
,current:0,bodyWidth:0,imgWidth:0,maxWidth:2232,initLeft:"",max:5,interval:null,isAnimate:0,imgLoader:""}
;
	var C ={
	initState:function(){
	var bWidth = $("body").width();
	if (bWidth > that.maxWidth){
	that.bodyWidth = that.maxWidth}
else{
	if (bWidth < 960){
	that.bodyWidth = 960}
else{
	that.bodyWidth = bWidth}
}
$(that.DOM.pictureBox).css("width",that.bodyWidth + "px");
	that.imgWidth = $(that.DOM.picItem).width() + 24;
	that.initLeft = -(that.imgWidth - (that.bodyWidth - that.imgWidth) / 2);
	var tempWidth = that.initLeft + 12;
	$(that.DOM.pictures).css("left",that.initLeft + "px");
	$(that.DOM.maskLeft).css("left",tempWidth + "px");
	$(that.DOM.maskRight).css("right",tempWidth + "px")}
,slide:function(state){
	if (that.isAnimate){
	return}
that.isAnimate = 1;
	var left = 0;
	$(that.DOM.smallPic[that.current]).removeClass("currentImg");
	that.current = that.current + state;
	C.move(500)}
,move:function(speed){
	var left = 0;
	if (that.current >= that.max){
	that.current = 0}
else{
	if (that.current < 0){
	that.current = that.max - 1}
}
left = that.initLeft - that.current * that.imgWidth;
	$(that.DOM.pictures).animate({
	left:left + "px"}
,speed,function(){
	that.isAnimate = 0}
);
	$(that.DOM.smallPic[that.current]).addClass("currentImg");
	bindDOMFuns.auto()}
}
;
	var _trans ={
}
;
	var bindDOMFuns ={
	prev:function(args){
	C.slide( - 1)}
,next:function(args){
	C.slide(1)}
,resize:function(e){
	C.initState()}
,auto:function(){
	that.interval && clearTimeout(that.interval);
	that.interval = setTimeout(function(){
	C.slide(1)}
,6000)}
,over:function(e){
	that.interval && clearTimeout(that.interval);
	that.interval = setTimeout(function(){
	if (that.isAnimate){
	return}
that.isAnimate = 1;
	var el = e.target || e.srcElement;
	if ($(el).attr("data-index") == undefined){
	el = $(el).parent()}
var index = parseInt($(el).attr("data-index"),10);
	$(that.DOM.smallPic[that.current]).removeClass("currentImg");
	that.current = index - 1;
	C.move(200)}
,500)}
}
;
	var Gls = ["prev","next"];
	var bindDom = function(){
	var d;
	handle = delegate(node);
	for (var i = 0;
	i < Gls.length;
	i++){
	d = Gls[i];
	handle.add(d,"click",bindDOMFuns[d])}
$(window).bind("resize",bindDOMFuns.resize);
	$(node).delegate('[node-type="smallPic"]',"mouseover",bindDOMFuns.over)}
;
	var parseDom = function(){
	that.DOM = buildDom(node)}
;
	var checkParent = function(){
	return node}
;
	var destroy = function(){
	handle.destroy();
	$(window).unbind("resize",bindDOMFuns.resize);
	$(node).undelegate('[node-type="smallPic"]',"mouseover",bindDOMFuns.over)}
;
	var init = function(){
	node = STK.E("jobs_home_homeView");
	if (!checkParent()){
	return}
parseDom();
	bindDom();
	C.initState();
	bindDOMFuns.auto();
	that.imgLoader = STK.common.imgLoader(node)}
;
	that.destroy = destroy;
	init();
	return that}
}
);
	STK.core.pageM.add("jobs.home.homeView");

CSS代码(home.css):

/*reset*/
body,button,input,select,textarea{font:12px/1.125 Arial,Helvetica,sans-serif;_font-family:"SimSun";color:#666}
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
li{list-style:none}
fieldset,img{border:0}
q:before,q:after{content:''}
input,textarea{outline-style:none}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none}
textarea{resize:none}
address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal}
legend{color:#000}
abbr,acronym{border:0;font-variant:normal}
a{text-decoration:none;color:#999}
a:hover{text-decoration:none}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
.clearLeft{clear:left}
.clearRight{clear:right}
/*slider*/
.zq_homeView{width:100%;background:#fff;padding-bottom:25px;padding-top:15px}
.zq_homeView .zq_pictureBox{height:360px;max-width:2232px;min-width:960px;overflow:hidden;position:relative;margin:0 auto 15px}
.zq_homeView .zq_pictureBox .zq_pictures{width:5952px;height:360px;overflow:hidden;position:absolute}
.zq_homeView .zq_pictureBox .zq_pictures a{width:720px;height:360px;float:left;display:inline;margin:0 12px}
.zq_homeView .zq_pictureBox .zq_pictures a img{width:720px;height:360px;display:block}
.zq_homeView .zq_imgBox{width:740px;margin:0 auto;position:relative}
.zq_homeView .zq_imgBox .zq_imgs{width:740px;_width:743px}
.zq_homeView .zq_imgBox .zq_imgs a{width:130px;height:50px;border:1px solid #fff;float:left;display:inline;margin:0 8px}
.zq_homeView .zq_imgBox .zq_imgs a:hover{border:1px solid #1abc9c}
.zq_homeView .zq_imgBox .zq_imgs a.currentImg{border:1px solid #1abc9c}
.zq_homeView .zq_imgBox .zq_imgs a img{width:130px;height:50px;display:block}
.zq_homeView .zq_imgBox .zq_slides a{display:block;width:30px;height:39px;position:absolute;top:9px}
.zq_homeView .zq_imgBox .zq_slides a em{display:block;width:22px;height:35px;background:url("../images/all.png") no-repeat scroll;margin:2px 4px}
.zq_homeView .zq_imgBox .zq_slides a.zq_slideLeft{left:-45px}
.zq_homeView .zq_imgBox .zq_slides a.zq_slideLeft em{background-position:-187px -47px}
.zq_homeView .zq_imgBox .zq_slides a.zq_slideRight{right:-45px}
.zq_homeView .zq_imgBox .zq_slides a.zq_slideRight em{background-position:-210px -47px}
.zq_homeView .zq_mask{width:732px;height:360px;position:absolute;background-color:#fff;opacity:.8;filter:alpha(opacity=80);top:0}
.zq_homeView .zq_maskLeft{left:0}
.zq_homeView .zq_maskRight{right:0}

附件:下载该文件资源,减少时间成本(增值服务)