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=gb2312" />
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" charset="gb2312" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>jQuery带箭头图片折叠轮换</title>
<base target="_blank">
</head>
<body>
<!-- 代码 开始 -->
<div class="orbit-wrapper">			
	<div id="featured" class="orbit">
		<a href="#"><img src="images/1.jpg" width="185" alt="《Just Married》" title="《Just Married》"></a>
		<a href="#"><img src="images/2.jpg" width="185" alt="《佩加索斯》" title="《佩加索斯》"></a>
		<a href="#"><img src="images/3.jpg" width="185" alt="《太庙的一场偶遇》" title="《太庙的一场偶遇》"></a>
		<a href="#"><img src="images/4.jpg" width="185" alt="《为爱痴狂》" title="《为爱痴狂》"></a>
		<a href="#"><img src="images/5.jpg" width="185" alt="《游走，在北京的每一条街》" title="《游走，在北京的每一条街》"></a>
	</div>
</div>
<script type="text/javascript" src="js/jq.orbit.js"></script>
<script type="text/javascript" src="js/orbit.js"></script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:20px 0">
<p style="margin:20px 0"></p>
</div>
<style>
/* 非必要样式 */
body {text-align:center;}
.orbit-wrapper{left:220px;}
</style>
</body>
</html>

JS代码(orbit.js):

$('#featured').orbit({
	frontendWidth:185,//frontend Img WidthfrontendHeight:300,frontendBorder:'1px solid #d9d9d9',frontendLeft:100,//front leftbackendWidth:170,//backend Img Width 1backendTop:20,//backend Img 1 PositionbackendLeft:40,//backend Img 1 leftbackendLeft3:175,//backend Img 1 rgihtbackendBorder:'1px solid #d9d9d9',backendWidth2:140,//backend Img Width 2backendTop2:40,// backend Img Position 2backendLeft4:250,// backend Img Position rightbackendLeft2:0,//backend Img Position leftbackendBorder2:'1px solid #d9d9d9',sceneWidth:460,sceneHeight:440,}
);

CSS代码(zzsc.css):

div.orbit-wrapper{position:relative;overflow:visible;width:515px;height:300px;}
div.orbit{position:relative;overflow:hidden;}
div.orbit span{display:none;}
div.orbit a img{position:absolute;display:block;width:194px;box-shadow:0 3px 8px rgba(0,0,0,0.5);padding:3px;border:#ccc 1px solid;background:#fff;}
div.orbit-wrapper h4{display:none;}
div.timer{display:none;}
div.slider-nav{display:block;}
div.slider-nav span{width:40px;height:120px;color:#fff;text-align:center;position:absolute;z-index:100;top:110px;cursor:pointer;text-indent:-9999px;}
div.slider-nav span.right{right:15px;background:url(../images/slider_right.jpg);}
div.slider-nav span.left{left:-50px;background:url(../images/slider_left.jpg);}
div.slider-nav span.right:hover{background:url(../images/slider_right.jpg) bottom;}
div.slider-nav span.left:hover{background:url(../images/slider_left.jpg) bottom;}

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