以下是 jQuery视频缩略图音乐播放器代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery视频缩略图音乐播放器代码</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.useso.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css' />-->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="jplayer/jquery.jplayer.js"></script>
<script src="js/jquery.audioslideshow.js"></script>
<script>
$(document).ready(function() {
$('#audio-slideshow').audioSlideshow();
});
</script>
</head>
<body>
<div class="container">
<header>
<h1>jQuery视频缩略图音乐播放器代码</h1>
</header>
<section>
<div id="audio-slideshow" class="audio-slideshow" data-audio="Exodus.mp3" data-audio-duration="161">
<div class="audio-slides">
<img src="images/1.jpg" alt="Legend of the Cryptids-1" data-thumbnail="images/18.jpg" data-slide-time="0">
<img src="images/2.jpg" alt="Legend of the Cryptids-2" data-thumbnail="images/17.jpg" data-slide-time="10">
<img src="images/3.jpg" alt="Legend of the Cryptids-3" data-thumbnail="images/16.jpg" data-slide-time="30">
<img src="images/4.jpg" alt="Legend of the Cryptids-4" data-thumbnail="images/15.jpg" data-slide-time="45">
<img src="images/5.jpg" alt="Legend of the Cryptids-5" data-thumbnail="images/14.jpg" data-slide-time="70">
<img src="images/6.jpg" alt="Legend of the Cryptids-6" data-thumbnail="images/13.jpg" data-slide-time="90">
<img src="images/7.jpg" alt="Legend of the Cryptids-7" data-thumbnail="images/12.jpg" data-slide-time="110">
<img src="images/8.jpg" alt="Legend of the Cryptids-8" data-thumbnail="images/11.jpg" data-slide-time="130">
<img src="images/9.jpg" alt="Legend of the Cryptids-9" data-thumbnail="images/10.jpg" data-slide-time="150">
</div>
<div class="audio-control-interface">
<div class="play-pause-container">
<a href="javascript:;" class="audio-play" tabindex="1">Play</a>
<a href="javascript:;" class="audio-pause" tabindex="1">Pause</a>
</div>
<div class="time-container">
<span class="play-time"></span> / <span class="total-time"></span>
</div>
<div class="timeline">
<div class="timeline-controls"></div>
<div class="playhead"></div>
</div>
<div class="jplayer"></div>
</div>
</div>
</section>
</div>
</body>
</html>
JS代码(jquery.audioslideshow.js):
(function( $ ){
$.fn.audioSlideshow = function( options ){
var settings ={
jPlayerPath:"/lib/swf",suppliedFileType:"mp3",playSelector:".audio-play",pauseSelector:".audio-pause",currentTimeSelector:".play-time",durationSelector:".total-time",playheadSelector:".playhead",timelineSelector:".timeline"}
;
if(options){
jQuery.extend(settings,options);
}
// Begin to iterate over the jQuery collection that the method was called onreturn this.each(function (){
// Cache `this`var $that = $(this),$slides = $that.find('.audio-slides').children(),$currentTime = $that.find(settings.currentTimeSelector),$duration = $that.find(settings.durationSelector),$playhead = $that.find(settings.playheadSelector),$timeline = $that.find(settings.timelineSelector),$playButton = $that.find(settings.playSelector),$pauseButton = $that.find(settings.pauseSelector),slidesCount = $slides.length,slideTimes = new Array(),audioDurationinSeconds = parseInt($that.attr('data-audio-duration')),isPlaying = false,currentSlide = -1;
$pauseButton.hide();
// Setup slides$slides.each(function(index,el){
var $el = $(el);
$el.hide();
var second = parseInt($el.attr('data-slide-time')),thumbnail = $el.attr('data-thumbnail');
if(index > 0){
slideTimes.push(second);
var img = '<span><img src="' + thumbnail + '"></span>',$marker = $('<a href="javascript:;
" class="marker" data-time="' + second + '">' + img + '</a>'),l = (second / audioDurationinSeconds) * $that.width();
$marker.css('left',l).click(function(e){
$jPlayerObj.jPlayer("play",parseInt($(this).attr('data-time')) + .5);
}
);
$timeline.append($marker);
}
}
);
var $jPlayerObj = $('<div></div>');
$that.append($jPlayerObj);
$jPlayerObj.jPlayer({
ready:function (){
$.jPlayer.timeFormat.padMin = false;
$(this).jPlayer("setMedia",{
mp3:$that.attr('data-audio')}
);
}
,swfPath:settings.jPlayerPath,supplied:settings.suppliedFileType,preload:'auto',cssSelectorAncestor:""}
);
$jPlayerObj.bind($.jPlayer.event.timeupdate,function(event){
// Add a listener to report the time play beganvar curTime = event.jPlayer.status.currentTime;
audioDurationinSeconds = event.jPlayer.status.duration;
var p = (curTime / audioDurationinSeconds) * 100 + "%";
$currentTime.text($.jPlayer.convertTime(curTime));
$duration.text($.jPlayer.convertTime(audioDurationinSeconds));
$playhead.width(p);
if(slidesCount){
var nxtSlide = 0;
for(var i = 0;
i < slidesCount;
i++){
if(slideTimes[i] < curTime){
nxtSlide = i + 1;
}
}
setAudioSlide(nxtSlide);
}
}
);
$jPlayerObj.bind($.jPlayer.event.play,function(event){
// Add a listener to report the time play beganisPlaying = true;
$playButton.hide();
$pauseButton.show();
}
);
$jPlayerObj.bind($.jPlayer.event.pause,function(event){
// Add a listener to report the time pause beganisPlaying = false;
$pauseButton.hide();
$playButton.show();
}
);
$slides.click(function(event){
$jPlayerObj.jPlayer("play");
}
);
$playButton.click(function(event){
$jPlayerObj.jPlayer("play");
}
);
$pauseButton.click(function(event){
$jPlayerObj.jPlayer("pause");
}
);
$timeline.click(function(event){
var l = event.pageX - $(this).offset().left;
var t = (l / $that.width()) * audioDurationinSeconds;
$jPlayerObj.jPlayer("play",t);
}
);
setAudioSlide(0);
function setAudioSlide(n){
if(n != currentSlide){
if($slides.get(currentSlide)){
$($slides.get(currentSlide)).fadeOut();
}
$($slides.get(n)).fadeIn();
currentSlide = n;
}
}
}
);
}
;
}
(jQuery));
CSS代码(demo.css):
@import url('normalize.css');/* General Demo Style */
body{font-family:'Open Sans Condensed','Arial Narrow',serif;background:#ddd url(../images/bgnoise_lg.jpg) repeat top left;font-weight:400;font-size:15px;color:#333;}
a{color:#555;text-decoration:none;}
.container{width:100%;position:relative;min-height:750px;}
.clr{clear:both;padding:0;height:0;margin:0;}
.container > header{margin:10px;padding:20px 10px 10px 10px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-size:40px;line-height:40px;margin:0;position:relative;font-weight:300;color:#726f66;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.container > header h1 span{font-weight:700;}
.container > header h2{font-size:14px;font-weight:300;letter-spacing:2px;text-transform:uppercase;margin:0;padding:15px 0 5px 0;color:#6190ca;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255,255,255,0.6);text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.3);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
CSS代码(style.css):
/* Component style */
.audio-slideshow{width:640px;height:520px;position:relative;margin:0 auto;}
.audio-slideshow .audio-slides{position:relative;}
.audio-slideshow .audio-slides img{display:block;position:absolute;top:0;left:0;}
.audio-slideshow .audio-control-interface{position:absolute;bottom:0;left:0;width:100%;height:48px;}
.audio-slideshow .play-pause-container,.audio-slideshow .time-container{position:absolute;bottom:25px;height:18px;font-weight:bold;color:#777;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.audio-slideshow .play-pause-container a{outline:none;text-indent:-99999px;width:16px;height:16px;position:absolute;}
.audio-slideshow .play-pause-container a.audio-play{background:transparent url(../images/play.png) no-repeat center center;}
.audio-slideshow .play-pause-container a.audio-pause{background:transparent url(../images/pause.png) no-repeat center center;}
.audio-slideshow .audio-control-interface .time-container{right:3px;}
.audio-slideshow .timeline{position:absolute;width:100%;background-color:#fff;height:20px;bottom:0;left:0;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.audio-slideshow .timeline .playhead{position:absolute;height:20px;background:#333;width:0;}
.marker{width:10px;height:10px;border-radius:5px;box-shadow:1px 1px 1px rgba(0,0,0,0.4) inset;position:absolute;background:#B8BAC6;top:5px;}
.marker span{padding:5px;position:absolute;bottom:20px;opacity:0;left:-50px;z-index:-1;box-shadow:1px 1px 4px rgba(0,0,0,0.5);background:#f5f6f6;background:-moz-linear-gradient(top,#f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5f6f6),color-stop(21%,#dbdce2),color-stop(49%,#b8bac6),color-stop(80%,#dddfe3),color-stop(100%,#f5f6f6));background:-webkit-linear-gradient(top,#f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);background:-o-linear-gradient(top,#f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);background:-ms-linear-gradient(top,#f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);background:linear-gradient(top,#f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6',endColorstr='#f5f6f6',GradientType=0 );-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.marker span img{display:block;}
.marker:hover span{opacity:1;z-index:100;}
分享到QQ
分享到微博
微信扫一扫
