jQuery CSS3动态缩放焦点图轮播滚动切换特效代码

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

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

以下是 jQuery CSS3动态缩放焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery CSS3动态缩放焦点图代码" />
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" charset="gb2312" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>jQuery CSS3动态缩放焦点图代码</title>
<base target="_blank">
</head>
<body><br />
<!-- 代码 开始 -->
<div class="sec bnspic">
	<div class="big_pic">
		<ul>
		<li class="on"><a href="#"><img src="images/ookamikodomo.jpg" title="狼之子雨与雪" /><span class="txt">细田守《狼之子雨与雪》狼孩子的伟大母亲</span></a></li>
		<li><a href="#"><img src="images/hotarubi.jpg" title="萤火之森" /><span class="txt">绿川幸《萤火之森》——凄美伤感的半人半妖与人类之恋</span></a></li>
		<li><a href="#"><img src="images/tsuioku.jpg" title="对某个飞行员的追忆" /><span class="txt">犬村小六《对某个飞行员的追忆》——相爱不能相守的空战罗曼剧</span></a></li>
		<li><a href="#"><img src="images/tokikake.jpg" title="穿越时空的少女" /><span class="txt">细田守《穿越时空的少女》——在未来等你</span></a></li>
		<li><a href="#"><img src="images/aura.jpg" title="AURA 魔龙院光牙最后的战斗" /><span class="txt">田中罗密欧《AURA 魔龙院光牙最后的战斗》——中二先驱妄想战士</span></a></li>
		<li><a href="#"><img src="images/neragaku.jpg" title="被狙击的学园" /><span class="txt">眉村卓《被狙击的学园》——穿越时间的警示</span></a></li>
		</ul>
	</div><!-- /big_pic -->
	<div class="small_pic clearfix">
		<ul>
			<li class="on"><a href="#"><img src="images/ookamikodomo_.jpg" alt="图片说明" /></a></li>
			<li><a href="#"><img src="images/hotarubi_.jpg" alt="图片说明" /></a></li>
			<li><a href="#"><img src="images/tsuioku_.jpg" alt="图片说明" /></a></li>
			<li><a href="#"><img src="images/tokikake_.jpg" alt="图片说明" /></a></li>
			<li><a href="#"><img src="images/aura_.jpg" alt="图片说明" /></a></li>
			<li><a href="#"><img src="images/neragaku_.jpg" alt="图片说明" /></a></li>
		</ul>
	</div><!-- /small_pic -->
</div>
<script>
	$(".small_pic li").mouseover(function(){
		$(this).siblings().removeClass("on");
		$(this).addClass("on");
		var preNumber=$(this).prevAll().size()+1;
		$(".big_pic li").removeClass("on");
		$(".big_pic li:nth-child("+preNumber+")").addClass("on");
	});
</script>
<!-- 代码 结束 --><div class="clear"></div>
<style>
/* 非必要样式 */
.sec{margin-left:auto;margin-right:auto;width:1000px;}
</style>
</body>
</html>

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
/* ���ô�����Ժ��Լ�ԭ������css�ϲ� */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
b{font-weight:normal;}
button{cursor:pointer;}
input,select,form img,button,label,textarea{font-size:12px;vertical-align:middle;font-family:Tahoma;color:#daac79;}
a{color:#bf966a;text-decoration:none;}
img{display:block;}
.clearfix:after,.anlist:after{content:"";display:block;clear:both;}
.clearfix,.anlist{zoom:1;}
.clear{height:0;overflow:hidden;clear:both;}
/* ����ͼ���� */
.bnspic a{display:block;}
.big_pic,.small_pic{float:left;}
.big_pic,.big_pic a,.big_pic img{width:681px;height:362px;}
.big_pic{overflow:hidden;position:relative;}
.big_pic li{position:absolute;top:0;left:0;opacity:0;-webkit-transform:scale(0.9);transform:scale(0.4);z-index:-1;transition:all linear 0.2s;}
.big_pic .on{opacity:1;-webkit-transform:scale(1);transform:scale(1);z-index:1;}
.big_pic a{position:relative;}
.big_pic .txt{width:681px;height:46px;line-height:46px;display:block;position:absolute;bottom:0;left:0;color:#BDBDBD;text-align:center;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000',endColorstr='#7F000000');background:rgba(0,0,0,0.5);transition:all ease .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.big_pic a:hover .txt{color:#FFFFFF;}
.small_pic{width:319px;position:relative;left:1px;}
.small_pic a,.small_pic img{width:158px;height:120px;}
.small_pic a{padding:1px;background:#121013;transition:all ease .2s;}
.small_pic .on,.small_pic li:hover{position:relative;z-index:1;}
.small_pic .on a{background:#FACC16;}
.small_pic li{width:160px;height:122px;margin:-1px 0 0 -1px;float:left;}

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