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 rel="stylesheet" href="css/zzsc.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
</head>
<body>
<br><br><br><br>
<div id="chinaz">
  <div class="container">
    <h2 class="hidden"></h2>
    <ul class="list">
      <li class="active"><a href="#repubblica_case_design" class="button">案例展示（一）</a></li>
      <li><a href="#casetrentine" class="button">案例展示（二）</a></li>
      <li><a href="#bobadilium" class="button">案例展示（三）</a></li>
      <li><a href="#fiart" class="button">案例展示（四）</a></li>
    </ul>
    <div id="chinaz_container">
      <div class="work active">
        <h3 class="hidden">Repubblica.it - Casa&amp;Design</h3>
        <ul class="images">
          <li class="left"><a href="#/"><img src="images/repubblica-design-home_01.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="#/"><img src="images/repubblica-design-home_02.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="#//"><img src="images/repubblica-design-home_03.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>有时候，莫名的心情不好，不想和任何人说话，也不想搭理任何人，只想一个人静静的发呆。</p>
          <p><a href="# " class="simple_link">&raquo; 查看详情</a></p>
        </div>
        <!--                <div class="quote"><blockquote></blockquote></div>-->
      </div>
      <div class="work">
        <h3 class="hidden">Case Trentine - Welcome home</h3>
        <ul class="images">
          <li class="left"><a href="#/"><img src="images/casetrentine-home_01.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="#/"><img src="images/casetrentine-home_02.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="#/"><img src="images/casetrentine-home_03.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>有时候，突然觉得心情烦躁，看什么都觉得不舒服，心里闷的发慌，拼命想寻找一个出口。</p>
          <p><a href="#" class="simple_link">&raquo; 查看详情</a></p>
        </div>
        <!--                <div class="quote"><blockquote></blockquote></div>-->
      </div>
      <div class="work">
        <h3 class="hidden">Bobadilium - Swiss Work Consultant</h3>
        <ul class="images">
          <li class="left"><a href="#/"><img src="images/bobadilium-home.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="#/"><img src="images/bobadilium-home2.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="#/"><img src="images/bobadilium-home3.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>总是在走过某个地方、听到一首歌，或者感到难过的时候想起你，然后看着你的头像不知所措</p>
          <p><a href="#" class="simple_link">&raquo; 查看详情</a></p>
        </div>
        <!--                <div class="quote"><blockquote></blockquote></div>-->
      </div>
      <div class="work">
        <h3 class="hidden">Fiart Mare - Yacht di lusso</h3>
        <ul class="images">
          <li class="left"><a href="#/"><img src="images/fiart-mare-home.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="#/"><img src="images/fiart-mare-home2.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="#/"><img src="images/fiart-mare-home3.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>当爱情降临，当意外发生，当一个人走进你的心扉。爱是一场毫无预兆的暴风雨，它会不知何年何月，何世何地，降临到你的头上。</p>
          <p><a href="#" class="simple_link">&raquo; 查看详情</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/zzsc.js"></script>
<br><br><br><br>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function(){
	$("#chinaz .images li").mouseenter(function(){
	if (!$("#chinaz").is(".waiting")){
	$el_left = $("#chinaz .work .images li.left");
	$el_center = $("#chinaz .work .images li.center");
	$el_right = $("#chinaz .work .images li.right");
	if ($(this).hasClass("left")){
	$($el_left).stop().animate({
	height:'284',width:'265'}
,300).css("z-index","10");
	$($el_center).stop().animate({
	height:'256',width:'240',left:'120'}
,300).css("z-index","5");
	$($el_right).stop().animate({
	height:'228',width:'215'}
,300).css("z-index","2");
}
if ($(this).hasClass("center")){
	$($el_center).stop().animate({
	height:'284',width:'265',left:'90'}
,300).css("z-index","10");
	$($el_left).stop().animate({
	height:'256',width:'240'}
,300).css("z-index","5");
	$($el_right).stop().animate({
	height:'256',width:'240'}
,300).css("z-index","5");
}
if ($(this).hasClass("right")){
	$($el_right).stop().animate({
	height:'284',width:'265'}
,300).css("z-index","10");
	$($el_center).stop().animate({
	height:'256',width:'240',left:'90'}
,300).css("z-index","5");
	$($el_left).stop().animate({
	height:'228',width:'215'}
,300).css("z-index","2");
}
}
}
);
	$.fn.cycle.transitions.factoria_portfolio = function($cont,$slides,opts){
	opts.fxFn = function(curr,next,opts){
	$("#chinaz").addClass("waiting");
	$(curr).find('.images li').each(function(idx,el){
	$(next).find('.images li').show();
	setTimeout(function(){
	$(el).slideUp(450,function(){
	if (idx == 1){
	$(next).find('.images li').css({
	"height":"","width":"","left":"","z-index":"","bottom":"-285px"}
);
	$(curr).fadeOut(opts.speed);
	$(next).fadeIn(opts.speed);
	$(next).find('.images li').each(function(idx,el){
	setTimeout(function(){
	$(el).animate({
	opacity:1,bottom:'0px'}
,450,function(){
	if (idx == 1){
	$("#chinaz").removeClass("waiting");
}
}
);
}
,(200*(2-idx)));
}
);
}
}
);
}
,(100*(2-idx)));
}
);
	opts.busy=0;
}
}
;
	$('#chinaz_container').cycle({
	"fx":"factoria_portfolio",timeout:5000,startingSlide:0,speed:800,cleartypeNoBg:true,pager:'#chinaz ul.list',pause:true,pagerAnchorBuilder:function(idx,slide){
	return '#chinaz ul.list li:eq(' + idx + ')';
}
,updateActivePagerLink:function(pager,currSlideIndex){
	$(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
,pauseOnPagerHover:true}
);
	$('#callout_process ul').cycle({
	"fx":"fade",timeout:3000,startingSlide:0,cleartypeNoBg:true,speed:500,slideExpr:'span',pager:'#callout_process ul',pagerEvent:'mouseover',pause:true,pagerAnchorBuilder:function(idx,slide){
	return $(slide).parent("li");
}
,updateActivePagerLink:function(pager,currSlideIndex){
	$(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
,pauseOnPagerHover:true}
);
	$('#callout_hotel ul.list').cycle({
	"fx":"fade",cleartypeNoBg:true,timeout:3000,startingSlide:0,speed:500,slideExpr:'span',pager:'#callout_hotel ul.list',pagerEvent:'mouseover',pause:true,pagerAnchorBuilder:function(idx,slide){
	return $(slide).parent("li");
}
,updateActivePagerLink:function(pager,currSlideIndex){
	$(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
,pauseOnPagerHover:true}
);
}
);

CSS代码(zzsc.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
body{font-family:Georgia,"Times New Roman",Times,serif;font-size:15px;line-height:21px;color:#78808B;padding-bottom:145px;text-shadow:1px 1px #fff;background-color:#F1F3F6;}
/* COMMON */
.container{width:880px;margin:0 auto;position:relative;padding-left:80px;}
.clear{clear:both;}
.hidden{display:none;}
.content_title{border-bottom:1px solid #E3E5E8;color:#45525F;font-size:35px;font-weight:normal;padding:20px 0;line-height:30px;text-shadow:none;}
.button{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:20px;text-decoration:none;padding:5px 15px;repeat-x left -250px;background:rgba(70,83,99,0.2);line-height:25px;font-style:normal;text-shadow:none;color:#465363;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear;}
.button:hover{color:#fff;background:#465363;}
/* HOMEPAGE */
#chinaz{background:url(../img/bg_dark2.png);margin-bottom:0;height:240px;}
#chinaz .container{height:240px;}
#chinaz_container{position:absolute;right:0;top:-45px;width:595px;height:285px;}
#chinaz .list{position:absolute;left:65px;top:15px;width:320px;font-family:Arial,Helvetica,sans-serif;}
#chinaz .list li{height:40px;text-shadow:0 1px #fff;font-weight:bold;margin-bottom:2px;}
#chinaz .list li a{display:block;padding:10px 20px;color:#818B97;line-height:20px;font-size:15px;background:none;background:rgba(70,83,99,0);text-shadow:0 1px #fff;}
#chinaz .list li.active a,#chinaz .list li a:hover{background:rgba(70,83,99,0.15);background-color:#D6D9DF}
#chinaz .list li.active a{color:#465363;}
#chinaz .link_portfolio{position:absolute;bottom:0;left:65px;}
#chinaz .work{display:none;position:absolute;right:0;bottom:0;width:595px;height:285px;}
#chinaz .work.active{display:block;}
#chinaz .work .images{width:440px;position:absolute;bottom:1px;left:0;height:284px;overflow:hidden;filter:0 !important;}
#chinaz .work .images li{padding-left:11px;overflow:hidden;filter:0 !important;}
#chinaz .work .images li a{display:inline-block;padding-right:10px;filter:0 !important;}
#chinaz .work .images li.left{position:absolute;bottom:0;left:0;z-index:10;height:284px;width:265px;}
#chinaz .work .images li.center{position:absolute;bottom:0;left:120px;z-index:5;width:240px;height:256px;}
#chinaz .work .images li.right{position:absolute;bottom:0;right:0;z-index:2;width:215px;height:228px;}
#chinaz .work .images li a img{width:100%;}
#chinaz .work .description{width:135px;position:absolute;top:60px;right:0;height:165px;overflow:hidden;padding:20px 0;line-height:18px;font-size:14px;}
#chinaz .work .description p{margin-bottom:15px;}
/*#chinaz .work .quote{position:absolute;bottom:0;left:0;z-index:100;padding-bottom:11px;width:100%;background:url(../img/shadow_so.png) no-repeat left bottom;color:#979FAA;font-style:italic;}
#chinaz .work .quote blockquote{width:555px;height:35px;background:#fff;padding:5px 20px;line-height:35px;}
*/
#chinaz .work.active{display:block;}
#chinaz .work .simple_link{color:#666666;text-decoration:none;font-family:"����";font-size:14px;}
#chinaz .work a.simple_link:hover{color:#333333;text-decoration:underline;}
#callout_process{float:left;width:100%;margin-bottom:30px;border-top:1px solid #E3E5E8;padding-top:80px;}
#callout_process .text{float:left;width:195px;}
#callout_process .text .description{font-style:italic;}
#callout_process .text .description p{margin-bottom:14px;}
#callout_process ul{width:660px;float:right;height:189px;position:relative;border-bottom:1px solid #E3E5E8;}
#callout_process li{font-family:Arial,Helvetica,sans-serif;float:left;line-height:16px;color:#979FAA;text-align:center;width:132px;height:200px;cursor:pointer;font-weight:bold;}
#callout_process li a{position:relative;z-index:10;color:#818B97;text-decoration:none;display:block;height:189px;padding:0 20px;cursor:auto;}
#callout_process li.active a{color:#45525F;}
#callout_process li span{display:block;position:absolute;left:0;top:0;width:660px;height:189px;opacity:0;}
#callout_process li.active span{opacity:1;}
#callout_hotel{float:left;width:570px;border-top:1px solid #E3E5E8;padding-top:60px;height:360px;position:relative;}
#callout_hotel .text{float:left;width:164px;}
#callout_hotel .text .title{font-size:15px;line-height:28px;font-weight:normal;font-style:italic;color:#45525f;margin-bottom:10px;}
#callout_hotel .text .title strong{display:block;font-style:normal;font-family:Arial,Helvetica,sans-serif;font-size:25px;text-shadow:none;}
#callout_hotel .text .description{margin-bottom:14px;font-style:italic;}
#callout_hotel .link{position:absolute !important;bottom:0;left:-15px;}
#callout_hotel .link .text{width:auto !important;}
#callout_hotel .list{position:absolute;right:0;top:52px;width:260px;padding-left:120px;background:url(../img/building.png) no-repeat left top;height:384px;padding-top:8px;}
#callout_hotel .list li{padding:12px 15px 12px 45px;font-style:italic;line-height:20px;margin-bottom:1px;}
#callout_hotel .list li.active{color:#45525f;}
#callout_hotel .list li .title{color:#818B97;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;font-style:normal;margin-bottom:4px;}
#callout_hotel .list li.active .title{color:#45525F;}
#callout_hotel .list li .building_image{background-repeat:no-repeat;background-position:left top;position:absolute;background-color:transparent;cursor:auto;}
#callout_hotel .list li.step_1 .building_image{width:65px;height:193px;top:0 !important;left:22px !important;}
#callout_hotel .list li.step_2 .building_image{width:81px;height:73px;top:162px !important;left:14px !important;}
#callout_hotel .list li.step_3 .building_image{width:95px;height:96px;top:199px !important;left:7px !important;}
#callout_hotel .list li.step_4 .building_image{width:109px;height:136px;bottom:0 !important;left:0 !important;top:auto !important;}
#callout_logbook{float:right;width:250px;border-top:1px solid #E3E5E8;padding-top:60px;}
#callout_logbook .post{padding-bottom:10px;margin:20px 0 15px;}
#callout_logbook .post .content{padding:20px;min-height:25px;position:relative;padding-top:75px;padding-bottom:30px;}
#callout_logbook .post .content .post_title{max-height:100px;color:#45525f;font-size:20px;line-height:26px;font-style:italic;width:190px;}
#callout_logbook .post .content .post_title a{color:#45525f;text-decoration:none;display:block;}
#callout_logbook .post .content .data{position:absolute;left:20px;top:23px;font-family:Arial,Helvetica,sans-serif;color:#979FAA;font-size:14px;}

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