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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery四屏带缩略图滚动焦点图</title>
<link href="style/style.css" rel="stylesheet" type="text/css" title="flash_style" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="fcnt" id="ppt">
	<div class="mimg" id="mpc">
		<div style="display:block"><a href="#nogo"><img src="images/1.jpg" alt="" /></a></div>
		<div><a href="#nogo"><img src="images/2.jpg" alt="" /></a></div>
		<div><a href="#nogo"><img src="images/3.jpg" alt="" /></a></div>
		<div><a href="#nogo"><img src="images/4.jpg" alt="" /></a></div>
	</div>
	<dl style="display:block">
		<dt><a href="#nogo">Merry Christmas!!圣诞快乐 圣诞快乐</a></dt>
		<dd>大家圣诞快乐啊，平安夜祝福你，平安夜收到心仪的礼物，平安幸福！！</dd>
	</dl>
	<dl>
		<dt><a href="#nogo">圣诞快乐 圣诞快乐Merry Christmas!!</a></dt>
		<dd>大家圣诞快乐啊，平安夜祝福你，平安夜收到心仪的礼物，平安幸福！！</dd>
	</dl>
	<dl>
		<dt><a href="#nogo">Merry Christmas!!圣诞快乐 圣诞快乐</a></dt>
		<dd>大家圣诞快乐啊，平安夜祝福你，平安夜收到心仪的礼物，平安幸福！！</dd>
	</dl>
	<dl>
		<dt><a href="#nogo">圣诞快乐 圣诞快乐Merry Christmas!!</a></dt>
		<dd>大家圣诞快乐啊，平安夜祝福你，平安夜收到心仪的礼物，平安幸福！！</dd>
	</dl>
	
	<div id="tri"></div>
	
	<ul>
		<li class="cur"><img src="images/1.jpg" alt="" /></li>
		<li><img src="images/2.jpg" alt="" /></li>
		<li><img src="images/3.jpg" alt="" /></li>
		<li><img src="images/4.jpg" alt="" /></li>
	</ul>
</div>
</body>
</html>

JS代码(common.js):

$(document).ready(function(){
	//幻灯片var j=1;
	var MyTime=false;
	var fot=200;
	//当前图片消失时间var fin=300;
	//新图片呈现时间var amt=300;
	//三角标志滑动时间var speed=3000;
	//自动播放间隔var maxpic=4;
	//切换图片个数$("#ppt").find("li").each(function(i){
	$("#ppt").find("li").eq(i).mouseover(function(){
	var cur=$("#mpc").find("div:visible").prevAll().length;
	if(i!==cur){
	j=i;
	$("#mpc").find("div:visible").fadeOut(fot,function(){
	$("#mpc").find("div").eq(i).fadeIn(fin);
}
);
	$("#tri").animate({
	"top":i*87+"px"}
,amt,current(this,"li"));
	$("#ppt").find("dl:visible").slideUp(fot,function(){
	$("#ppt").find("dl").eq(i).slideDown(fin);
}
);
}
}
);
}
);
	//标记当前function current(ele,tag){
	$(ele).addClass("cur").siblings(tag).removeClass("cur");
}
//自动播放 不需要的话可以删除这一段$('#imgnav').hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
}
,function(){
	MyTime = setInterval(function(){
	$("#ppt").find("li").eq(j).mouseover();
	j++;
	if(j==maxpic){
	j=0;
}
}
,speed);
}
);
	//自动开始var MyTime = setInterval(function(){
	$("#ppt").find("li").eq(j).mouseover();
	j++;
	if(j==maxpic){
	j=0;
}
}
,speed);
}
);

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;}
body{background:#000;color:#fff;}
img,a img{border:none;}
a{text-decoration:none;color:#fff;}
a:hover{text-decoration:underline;color:#fff;}
/* fcnt */
.fcnt{display:block;height:342px;width:764px;margin:10px auto;border:4px solid #222;position:relative;overflow:hidden;}
.fcnt .mimg{float:left;width:610px;height:340px;overflow:hidden;border:1px solid #470304;}
.fcnt .mimg div{display:none;}
.mimg img{width:610px;height:340px;}
.fcnt ul{float:right;width:152px;height:340px;}
*html .fcnt ul{position:absolute;right:0;top:0;width:152px;height:340px;}
.fcnt li{display:block;height:82px;width:150px;margin-bottom:5px;cursor:pointer;overflow:hidden;}
.fcnt li img{width:150px;height:82px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;}
.fcnt li.cur img{width:142px;height:75px;margin:4px 0 0 4px;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
#tri{position:absolute;top:0;right:2px;z-index:1000;width:155px;height:82px;background:url(img/point.png) no-repeat;cursor:pointer;}
*html #tri{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image,src="style/img/point.png");background:none;}
.fcnt dl{position:absolute;bottom:1px;left:0px;width:611px;height:80px;background:url(img/shadow.png) no-repeat;display:none;}
.fcnt dt{line-height:38px;text-align:center;font-size:22px;font-family:"黑体";font-weight:900;}
.fcnt dd{line-height:24px;text-align:center;font-size:14px;}
*html .fcnt dl{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image,src="style/img/shadow.png");background:none;}

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