<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>jQuery切割抖动幻灯片 - 站长素材</title>
<link href="assets/projects/roundabout2/demos/demos.css" rel="stylesheet" />
<style>
.facade {
width: 895px;
height: 398px;
overflow: hidden;
margin: 0 auto;
position: relative;
border: 8px solid #131313;
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 226px;
height: 400px;
position: absolute;
overflow: hidden;
top: 0px;
z-index: 100;
background: #000 url('assets/projects/roundabout2/demos/facade/img/black_linen.png') scroll repeat 50% 50%;
}
ul.column1 { left: 0px; }
ul.column2 { left: 224px; }
ul.column3 { left: 448px; }
ul.column4 { left: 672px; }
ul li { overflow: hidden; height: 400px; width: 225px; }
ul li img { position: absolute; top: 0; }
ul.column1 img { left: 0px; }
ul.column2 img { left: -225px; }
ul.column3 img { left: -450px; }
ul.column4 img { left: -675px; }
#carbonads-container {
clear: both;
margin-top: 1em;
}
#carbonads-container .carbonad {
margin: 0 auto;
}
</style>
</head>
<body>
<br>
<div class="facade">
<ul class="column1">
<li><img src="assets/projects/roundabout2/demos/facade/img/image1.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image2.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image3.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image4.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image5.jpg" alt="First Image" /></li>
</ul>
<ul class="column2">
<li><img src="assets/projects/roundabout2/demos/facade/img/image1.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image2.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image3.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image4.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image5.jpg" alt="First Image" /></li>
</ul>
<ul class="column3">
<li><img src="assets/projects/roundabout2/demos/facade/img/image1.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image2.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image3.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image4.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image5.jpg" alt="First Image" /></li>
</ul>
<ul class="column4">
<li><img src="assets/projects/roundabout2/demos/facade/img/image1.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image2.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image3.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image4.jpg" alt="First Image" /></li>
<li><img src="assets/projects/roundabout2/demos/facade/img/image5.jpg" alt="First Image" /></li>
</ul>
</div>
<div class="interact">
<a href="#" id="advance">点击切换下一张图片</a>
</div>
<script src="lib/js/libraries/jquery.js"></script>
<script src="lib/js/projects/roundabout/jquery.roundabout2.js"></script>
<script src="lib/js/projects/roundabout-shapes/jquery.roundabout-shapes2.js"></script>
<script src="lib/js/plugins/jquery.easing.js"></script>
<script>
$(document).ready(function() {
var i = 0,
settings = [
{ duration: 1200, easing: 'easeOutBounce' },
{ duration: 1600, easing: 'easeOutElastic' },
{ duration: 600, easing: 'easeOutQuad' },
{ duration: 1000, easing: 'easeOutBack' }
];
$('ul.column1, ul.column3').roundabout({
clickToFocus: false,
minOpacity: 0,
minScale: 0,
minZ: 0,
duration: 1500,
shape: 'rollerCoaster'
});
$('ul.column2, ul.column4').roundabout({
clickToFocus: false,
minOpacity: 0,
minScale: 0,
minZ: 0,
reflect: true,
duration: 1500,
shape: 'rollerCoaster'
});
$('#advance').click(function() {
if ($('.column1').data("roundabout").animating || $('.column4').data("roundabout").animating) {
return false;
}
i++;
i = i++ % settings.length;
// fade out link
$(this).fadeTo(400, 0.5);
$('.column1').roundabout('animateToNextChild', settings[i].duration, settings[i].easing);
setTimeout(function() { $('.column2').roundabout('animateToNextChild', settings[i].duration + 100, settings[i].easing); }, 100);
setTimeout(function() { $('.column3').roundabout('animateToNextChild', settings[i].duration + 200, settings[i].easing); }, 200);
setTimeout(function() { $('.column4').roundabout('animateToNextChild', settings[i].duration + 250, settings[i].easing, function() { $('#advance').fadeTo(400, 1); }); }, 300);
return false;
});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery切割抖动幻灯片.zip
版权申诉
141 浏览量
2022-11-21
11:33:04
上传
评论
收藏 1.13MB ZIP 举报
jQuery切割抖动幻灯片.zip （13个子文件） 
jQuery切割抖动幻灯片 jiaoben1470 assets projects roundabout2 demos facade img 
image2.jpg 185KB
black_linen.png 137KB image4.jpg 177KB image5.jpg 251KB image1.jpg 91KB image3.jpg 194KB
demos.css 947B
index.html 6KB lib js plugins jquery.easing.js 8KB libraries jquery.js 92KB projects roundabout-shapes jquery.roundabout-shapes2.js 5KB roundabout jquery.roundabout2.js 32KB jQuery切割抖动幻灯片.jpg 80KB资源评论
