【免费】jQuery五屏轮播手风琴代码.rar资源-CSDN文库

共10个文件

jpg：6个

js：2个

html：1个

jquery

需积分: 0 52 浏览量 2024-06-23 14:23:34 上传评论收藏 1.62MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery五屏轮播手风琴代码.rar （10个子文件）

jQuery五屏轮播手风琴代码

1777

jquery-1.8.2.min.js 91KB

2246_160605215522_1.jpg 64KB

index.html 3KB

images

2.jpg 135KB

1.jpg 92KB

5.jpg 129KB

3.jpg 132KB

4.jpg 160KB

动画000001.gif 975KB

jquery.indexSlidePattern.js 3KB

<!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五屏轮播手风琴代码 - php中文网</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="http://php.cn"><img src="images/1.jpg" /></a> <div><a href="http://php.cn">标题1</a></div> </li> <li> <a href="http://php.cn"><img src="images/2.jpg" /></a> <div><a href="http://php.cn">标题2</a></div> </li> <li> <a href="http://php.cn"><img src="images/3.jpg" /></a> <div><a href="http://php.cn">标题3</a></div> </li> <li> <a href="http://php.cn"><img src="images/4.jpg" /></a> <div><a href="http://php.cn">标题4</a></div> </li> <li> <a href="http://php.cn"><img src="images/5.jpg" /></a> <div><a href="http://php.cn">标题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://php.cnom/" target="_blank">php中文网</a></p> </div> </body> </html>

评论收藏

内容反馈