<!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() {
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
scroll: {
fx: 'fade'
}
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
background-color: #eee;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
border: 1px solid #ccc;
background-color: #fff;
width: 600px;
height: 400px;
padding: 20px;
margin: -220px 0 0 -320px;
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 5px 10px #ccc;
}
#inner {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#navi {
background-color: #333;
background-color: rgba(30, 30, 30, 0.8);
border-top: 1px solid #000;
width: 600px;
height: 70px;
position: absolute;
bottom: -60px;
left: 0;
z-index: 10;
}
#timer {
background-color: #222;
background-color: rgba(20, 20, 20, 0.8);
width: 0;
height: 70px;
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
#prev, #next, #play {
display: block;
position: absolute;
z-index: 30;
}
#prev, #next {
width: 47px;
height: 47px;
top: 13px;
}
#play {
width: 53px;
height: 53px;
top: 10px;
background: url(img/ui/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(img/ui/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(img/ui/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(img/ui/next.png) 0 0 no-repeat transparent;
right: 220px;
}
#donate-spacer {
height: 100%;
}
#donate {
border-top: 1px solid #999;
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="inner">
<div id="carousel">
<img src="img/rally1.jpg" alt="rally1" width="600" height="400" border="0" />
<img src="img/rally2.jpg" alt="rally2" width="600" height="400" border="0" />
<img src="img/rally3.jpg" alt="rally3" width="600" height="400" border="0" />
<img src="img/rally4.jpg" alt="rally4" width="600" height="400" border="0" />
</div>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</div>
<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 （11个子文件） 
jQuery类似播放器焦点图 jiaoben1250 img 
rally2.jpg 102KB rally4.jpg 88KB ui 
next.png 3KB prev.png 3KB pause.png 4KB play.png 4KB rally1.jpg 51KB rally3.jpg 63KB
index.html 4KB
jquery.carouFredSel-6.0.4-packed.js 35KB jQuery类似播放器焦点图.jpg 114KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
