<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>jQuery全窗口幻灯片 - 站长素材</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
function getMinMarge( newItems ) {
var center = newItems.eq(0).outerWidth(true) + (newItems.eq(1).outerWidth(true) / 2);
var minMarg = ($(window).width() / 2) - center;
return minMarg;
}
function showTitle( item ) {
$('#title').html( item.attr( 'alt' ) );
}
$(function() {
$('#carousel').carouFredSel({
width: 10000, // should be wide enough ;)
height: 790,
align: false,
circular: false,
infinite: false,
items: 3,
prev: '#prev',
next: '#next',
auto: false,
scroll: {
items: 1,
duration: 1000,
onBefore: function( data ) {
$(this).parent().animate({
'marginLeft': getMinMarge( data.items.visible )
}, data.scroll.duration);
data.items.old.eq(1).animate({
'opacity': 0.2
}, data.scroll.duration);
data.items.visible.eq(1).animate({
'opacity': 1
}, data.scroll.duration);
showTitle( data.items.visible.eq(1) );
}
},
onCreate: function( data ) {
$(this).parent().css({
'marginLeft': getMinMarge( data.items )
});
$(this).children().not(':eq(1)').css({
'opacity': 0.2
});
showTitle( data.items.eq(1) );
}
});
});
</script>
<style type="text/css">
html, body {
background-color: #434;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
body {
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
}
#wrapper {
width: 100%;
height: 790px;
margin-top: -395px;
position: absolute;
left: 0;
top: 50%;
overflow: hidden;
}
#carousel img {
background-color: #fff;
border: none;
display: block;
padding: 15px;
margin: 30px;
float: left;
box-shadow: 0 0 20px #000;
}
#carousel .empty {
display: block;
width: 600px;
height: 400px;
float: left;
}
#bar {
background-color: #191919;
text-align: center;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#bar * {
color: #fff;
line-height: 50px;
font-size: 18px;
font-weight: bold;
}
#prev, #next {
font-size: 30px;
color: #fff;
text-decoration: none;
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 0;
}
#prev:hover, #next:hover {
background-color: #000;
}
#prev.disabled, #next.disabled {
background-color: transparent !important;
cursor: default;
opacity: 0.1;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#donate-spacer {
height: 100%;
}
#donate {
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<span class="empty"></span> <!-- trick the carousel to start 1 item to the right -->
<img src="img/ny1.jpg" alt="Lunar New Year 2013: Year of the Dragon" width="900" height="600" style="margin-top: 80px;" />
<img src="img/ny2.jpg" alt="An 18 meter long dragon at Malang city park" width="525" height="700" />
<img src="img/ny3.jpg" alt="Actors perform the dragon dance" width="600" height="600" style="margin-top: 80px;" />
<img src="img/ny4.jpg" alt="Members of the chinese community in India celebrate the Chinese New Year" width="800" height="500" style="margin-top: 130px;" />
<img src="img/ny5.jpg" alt="Woman pray at a Buddhist temple in Denpasar" width="700" height="700" />
<img src="img/ny6.jpg" alt="A reveller writes the "Dragon" in traditional Chinese characters" width="800" height="550" style="margin-top: 105px;" />
<img src="img/ny7.jpg" alt="Chinese living in Ukraine carry a dragon on January 22" width="800" height="400" style="margin-top: 180px;" />
<img src="img/ny8.jpg" alt="Fireworks over Hoan Kiem Lake" width="800" height="600" style="margin-top: 80px;" />
<span class="empty"></span> <!-- trick the carousel to end 1 item to the left -->
</div>
</div>
<div id="bar">
<a id="prev" href="#">«</a>
<a id="next" href="#">»</a>
<span id="title"></span>
</div>
<div id="donate-spacer"></div>
<div id="donate">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
jQuery全窗口幻灯片.zip （11个子文件） 
jQuery全窗口幻灯片 
jQuery全窗口幻灯片.jpg 95KB jiaoben1273 img ny1.jpg 161KB ny6.jpg 195KB ny3.jpg 205KB ny2.jpg 244KB ny7.jpg 112KB ny4.jpg 119KB ny5.jpg 124KB ny8.jpg 175KB
index.html 5KB
jquery.carouFredSel-6.0.4-packed.js 35KB资源评论
