<!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>
<style type="text/css">
*{padding:0;margin:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* demo */
/*五张图片在缩略图时所显示的位置调整*/
#demo li:nth-of-type(1) img{ transform: translate(-210px);}
#demo li:nth-of-type(2) img{ transform: translate(-180px);}
#demo li:nth-of-type(3) img{ transform: translate(-380px);}
#demo li:nth-of-type(4) img{ transform: translate(-450px);}
#demo li:nth-of-type(5) img{ transform: translate(-320px);}
#demo{width:1160px;height:512px;margin:60px auto 0 auto;}
#demo img{width: 820px; height: 512px; max-width: 820px;}
#demo li{float:left;position:relative;width:82px;height:100%;overflow:hidden;cursor:pointer; transition:0.5s; transform-origin:bottom;filter:alpha(opacity=50);opacity:0.5;}
#demo li img{transition:1.2s;}
#demo li a{display:block;}
#demo li div{position:absolute;bottom:0;left:0;width:100%;background:#000;line-height:32px;filter:alpha(opacity=70);opacity:0.7;text-indent:2em;}
#demo li div a{color:#FFF;text-decoration:none;}
#demo li div a:hover{color:#F00;text-decoration:none;}
#demo li.active{cursor:pointer; transform:scale(1.02,1.08); z-index:3;width:820px;filter:alpha(opacity=100);opacity:1;}
#demo li.active img{transform:translate(0px);}
#demo li:nth-of-type(1){transform-origin:bottom left;}
#demo li:nth-of-type(5){transform-origin:bottom right;}
</style>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.indexSlidePattern.js"></script>
<script language="javascript">
$(document).ready(function(e){
var opt = {
"speed" : "fast" , //变换速度,三速度可选 slow,normal,fast;
"by" : "mouseover" , //触发事件,click或者mouseover;
"auto" : true , //是否自动播放;
"sec" : 3000 //自动播放间隔;
};
$("#demo").IMGDEMO(opt);
});
</script>
</head>
<body>
<ul id="demo">
<li class="active">
<a href="#"><img src="images/1.jpg" /></a>
<div><a href="#">标题1</a></div>
</li>
<li>
<a href="#"><img src="images/2.jpg" /></a>
<div><a href="#">标题2</a></div>
</li>
<li>
<a href="#"><img src="images/3.jpg" /></a>
<div><a href="#">标题3</a></div>
</li>
<li>
<a href="#"><img src="images/4.jpg" /></a>
<div><a href="#">标题4</a></div>
</li>
<li>
<a href="#"><img src="images/5.jpg" /></a>
<div><a href="#">标题5</a></div>
</li>
</ul>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
jQuery五屏大图轮播手风琴代码.zip
版权申诉
103 浏览量
2023-09-25
13:46:01
上传
评论
收藏 636KB ZIP 举报
jQuery五屏大图轮播手风琴代码.zip （8个子文件） 
jquery-1.8.2.min.js 91KB
index.html 3KB
images 
2.jpg 135KB 1.jpg 92KB 5.jpg 129KB 3.jpg 132KB 4.jpg 160KB jquery.indexSlidePattern.js 3KB资源评论
