jquery多屏格子焦点图轮播滚动切换特效代码

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

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

以下是 jquery多屏格子焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery多屏格子焦点图</title>
<link href="css/wowsai.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js" charset="utf-8"></script>
</head>
<body>
<br>
<div id="ws_warp">
<div class='clear'></div>
<div id="wrap">
<script type="text/javascript" src="js/lunfan.js" charset="utf-8"></script>
<div id="mainBox">
<div class="content"> 
<div class="zhuanti_box">
<div id="slideBox" style="float:left;">
<div class="J_slide" name="__DTD2">
<div class="J_slide_clip">
<ul class="J_slide_list">
<li class="J_slide_item">
<a href="#" target="_blank" title="大美在民间"><img alt="大美在民间" src="images/201302040909245804.jpg" height="329" width="600"></a>
<div class="J_slide_advance">
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040916387940.jpg" alt="老艺人手工虎头鞋"></a></p>
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040917051007.jpg" alt="传统武强年画"></a></p>
<p style="margin-right:0;"><a href="#" rel="nofollow" target="_blank"><img src="images/201302040917543303.jpg" alt="精美传统剪纸"></a></p>
</div>
</li>
<li class="J_slide_item">
<a href="http://www.wowsai.com/index.php?app=shopping&act=total&id=136" target="_blank" title="食色性也"><img alt="食色性也" src="images/201301311612466502.jpg" height="329" width="600"></a>
<div class="J_slide_advance">
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040923225444.jpg" alt="马二先生的店"></a></p>
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040923589465.jpg" alt="捕梦酱"></a></p>
<p style="margin-right:0;"><a href="http://www.wowsai.com/index.php?app=adsystem&act=total&id=3061" rel="nofollow" target="_blank"><img src="images/201302040924331641.jpg" alt="派悦坊"></a></p>
</div>
</li>
<li class="J_slide_item">
<a href="#" target="_blank" title="小确幸轻熟女"><img alt="小确幸轻熟女" src="images/201301300939229190.jpg" height="329" width="600"></a>
<div class="J_slide_advance">
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040921165120.jpg" alt="尘店出品"></a></p>
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040922483037.jpg" alt="未禾原创设计女装"></a></p>
<p style="margin-right:0;"><a href="#" rel="nofollow" target="_blank"><img src="images/201302040924046527.jpg" alt="相对纶原创女装"></a></p>
</div>
</li>
<li class="J_slide_item">
<a href="#" target="_blank" title="居家慢生活"><img alt="居家慢生活" src="images/201301281416578921.jpg" height="329" width="600"></a>
<div class="J_slide_advance">
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040923257447.jpg" alt="喝茶去"></a></p>
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040924235973.jpg" alt="做料理"></a></p>
<p style="margin-right:0;"><a href="http://www.wowsai.com/index.php?app=adsystem&act=total&id=3063" rel="nofollow" target="_blank"><img src="images/201302040925056122.jpg" alt="安稳觉"></a></p>
</div>
</li>
<li class="J_slide_item">
<a href="#" target="_blank" title="岁岁平安"><img alt="岁岁平安" src="images/201301251010573290.jpg" height="329" width="600"></a>
<div class="J_slide_advance">
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040923177095.jpg" alt="服装新品"></a></p>
<p><a href="#" rel="nofollow" target="_blank"><img src="images/201302040924411894.jpg" alt="家居饰物"></a></p>
<p style="margin-right:0;"><a href="http://www.wowsai.com/index.php?app=adsystem&act=total&id=3066" rel="nofollow" target="_blank"><img src="images/201302040926316237.jpg" alt="情侣礼物"></a></p>
</div>
</li>
<li class="J_slide_item">
<a href="#" target="_blank" title="潮男速成计划"><img alt="潮男速成计划" src="images/201301230949139489.jpg" height="329" width="600"></a>
<div class="J_slide_advance">
<p><a href="#" rel="nofollow" target="_blank"><img src="images/2013020409195591101.jpg" alt="RASEN FAMILY"></a></p>
<p><a href="#" rel="nofollow" target="_blank"><img src="images/2013020409203782111.jpg" alt="无限不循环男装店"></a></p>
<p style="margin-right:0;"><a href="#" rel="nofollow" target="_blank"><img src="images/201302040921086470.jpg" alt="SOYE原创高级手工皮具"></a></p>
</div>
</li>
</ul>
</div>
<ul class="J_slide_trigger">
<li class=""> <a href="#" target="_blank" title="大美在民间"> 
大美在民间</a></li>
<li class=""> <a href="#" target="_blank" title="食色性也"> 
食色性也</a></li>
<li class=""> <a href="#" target="_blank" title="小确幸轻熟女"> 
小确幸轻熟女</a></li>
<li class=""> <a href="#" target="_blank" title="居家慢生活"> 
居家慢生活</a></li>
<li class=""> <a href="#" target="_blank" title="岁岁平安"> 
岁岁平安</a></li>
<li class=""> <a href="#" target="_blank" title="潮男速成计划"> 
潮男速成计划</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
new Tab('.J_tab',{auto:true});
new Slide('#slideBox',{index: 1 ,effect:'slide', firstDelay:8});
</script> 
</div>
</body></html>

JS代码(lunfan.js):

/** * slide (Version 1.3) * @author chuanbin (wuchuanbin3013@163.com) * * Create a Slide * @example new Slide(container,options,callback,obj);
	* on Jquery * */
function Slide(container,options,callback,obj){
	this.container=$(container);
	this.list=$(container+' .J_slide_list');
	this.handle=$(container+' .J_slide_trigger li');
	this.item=$(container+' .J_slide_item');
	this.itemWH=0;
	this.count=this.handle.length;
	this.timer=null;
	this.eTime=null;
	this.options=$.extend({
	auto:true,delay:4,duration:500,effect:'fade',event:'mouseover',firstDelay:null,index:1,vertical:false}
,options);
	this.init();
	if(callback){
	callback.call(this,obj);
}
}
Slide.prototype={
	init:function(){
	var slideClip,itemW,itemH,itemWH,that=this,list=this.list,item=this.item,count=this.count,op=this.options,auto=!!op.auto,vertical=!!op.vertical;
	if(op.effect==='fade'){
	list.css({
	position:'relative'}
);
	item.css({
	position:'absolute'}
);
}
if(op.effect==='slide'){
	list.css({
	position:'absolute'}
);
	if(!list.parent().hasClass('J_slide_clip')){
	list.wrap('<div class="J_slide_clip"></div>');
}
itemW=item.outerWidth(true);
	itemH=item.outerHeight(true);
	this.container.find('.J_slide_clip').css({
	position:'relative',overflow:'hidden',height:itemH,width:itemW}
);
	this.itemWH=vertical?itemH:itemW;
	if(!vertical){
	item.css({
	'float':'left'}
);
	list.width(item.width()*item.length);
}
}
this.handle.bind(op.event,function(){
	that._trigger(this)}
);
	if(op.index==='r'){
	op.index=this._random(count);
}
if(op.index> count||op.index<1){
	op.index=1;
}
this._showFirst(op.index);
	if(auto){
	this._auto(op.firstDelay);
	this.container.hover(function(){
	that._stop();
}
,function(){
	that._auto();
}
);
}
}
,_random:function(max){
	return parseInt(Math.random() * max + 1);
}
,_trigger:function(o){
	var index,op=this.options,handle=this.handle;
	if(op.index===(handle.index(o)+1)){
	return;
}
index=op.index=handle.index(o)+1;
	this._show(index);
}
,_show:function(i){
	var that=this,op=this.options,vertical=!!op.vertical;
	this.handle.removeClass('cur').eq(i-1).addClass('cur');
	if(op.effect==='fade'){
	clearTimeout(this.eTime);
	this.eTime=setTimeout(function(){
	that.item.not(that).css({
	zIndex:-1}
).eq(i-1).css({
	zIndex:9}
).animate({
	opacity:1}
,that.options.duration,function(){
	that.item.not(this).css({
	opacity:0}
)}
);
}
,150);
}
if(op.effect==='slide'){
	itemWH=this.itemWH;
	if(vertical){
	this.list.stop().animate({
	left:-itemWH*(i-1)}
,this.options.duration);
}
else{
	this.list.stop().animate({
	left:-itemWH*(i-1)}
,this.options.duration);
}
}
}
,_showFirst:function(i){
	var op=this.options,vertical=!!op.vertical;
	this.handle.removeClass('cur').eq(i-1).addClass('cur');
	if(op.effect==='fade'){
	this.item.not(this).css({
	zIndex:-1,opacity:0}
).eq(i-1).css({
	zIndex:9,opacity:1}
);
}
if(op.effect==='slide'){
	itemWH=this.itemWH;
	if(vertical){
	this.list.css({
	top:-itemWH*(i-1)}
);
}
else{
	this.list.css({
	left:-itemWH*(i-1)}
);
}
}
}
,_auto:function(delay){
	var that=this,op=that.options;
	this.timer=setTimeout(function(){
	op.index = op.index< that.count? ++op.index:1;
	that._show(op.index);
	that._auto();
}
,delay ? delay*1000:op.delay*1000);
}
,_stop:function(){
	clearTimeout(this.timer);
}
}
;
	/** * tab (Version 1.3) * @author wuchuanbin (wuchuanbin3013@163.com) * * Create a Tab * @example new Tab(container,options);
	* on Jquery * */
function Tab(container,options,callback){
	this.container=$(container);
	this.handle=$(container+' .J_tab_nav li');
	this.panel=$(container+' .J_tab_panel');
	this.count=this.handle.length;
	this.timer=null;
	this.eTime=null;
	this.options=$.extend({
	auto:false,delay:4,event:'mouseover',index:1}
,options);
	this.init();
	if(callback){
	callback.call(this);
}
}
Tab.prototype={
	init:function(){
	var that=this,count=this.count,op=this.options,auto=!!op.auto;
	this.handle.bind(op.event,function(){
	that._trigger(this);
}
);
	if(op.index==='r'){
	op.index=this._random(count)}
this._show(op.index);
	if(auto){
	this._auto();
	this.container.hover(function(){
	that._stop();
}
,function(){
	that._auto();
}
);
}
}
,_random:function(max){
	return parseInt(Math.random() * max + 1);
}
,_trigger:function(o){
	var index,op=this.options,handle=this.handle;
	if(op.index===(handle.index(o)+1)){
	return;
}
index=op.index=handle.index(o)+1;
	this._show(index);
}
,_show:function(i){
	this.handle.removeClass('cur').eq(i-1).addClass('cur');
	this.panel.addClass('none').eq(i-1).removeClass('none');
}
,_auto:function(){
	var that=this,op=that.options;
	this.timer=setTimeout(function(){
	op.index = op.index< that.count? ++op.index:1;
	that._show(op.index);
	that._auto();
}
,op.delay*1000);
}
,_stop:function(){
	clearTimeout(this.timer);
}
}
;

CSS代码(wowsai.css):

@charset utf-8;body,html,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd,form,div,p,img,table,tr,th,strong{font-family:宋体;margin:0;padding:0;}
ul,dl{list-style-type:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;}
img{border:0;}
input{font-size:12px;line-height:18px;color:#8A8A8A;}
.clear{clear:both;font-size:0;line-height:0;height:0;}
a:hover{text-decoration:underline;}
body{background-color:#FFF;font-size:12px;line-height:20px;color:#5C5C5C;}
#wrap{width:650px;background-color:#FFF;margin:0 auto;padding:0 0 8px;}
/****首页焦点图的部分*******/
.zhuanti_box{width:600px;height:auto;float:left;padding:7px;border:1px solid #eae9ef;}
#slideBox{width:600px;float:left;overflow:hidden;}
#slideBox .J_slide_list{width:3600px;}
#slideBox .J_slide_list .J_slide_item{width:600px;height:478px;float:left;}
#slideBox .J_slide_list .J_slide_item img{vertical-align:top;}
#slideBox .J_slide_trigger{width:600px;height:32px;background:#5a5a5a;margin-top:1px;}
#slideBox .J_slide_trigger li,.J_slide_trigger a{width:100px;}
#slideBox .J_slide_trigger li{float:left;height:32px;line-height:32px;text-align:center;_display:inline;overflow:hidden;}
#slideBox .J_slide_trigger li a{display:block;height:32px;color:#fff;font-family:"Microsoft Yahei","微软雅黑";}
#slideBox .J_slide_trigger li.cur a,.J_slide_trigger li a:hover{color:#FFF;background:#21b6bb;text-decoration:none;}
.J_slide_advance{width:600px;float:left;height:148px;margin-top:1px;}
.J_slide_advance p{width:199px;margin-right:1px;float:left;}
/***首页第一屏右侧广告部分****/
a,#nextPage span a,#nextPage span a:hover{color:#5B5B5B;text-decoration:none;}

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