Html用jquery制作带背景音乐的照片幻灯片式切换的代码和解析

1 制作一款照片自动切换，且带背景音乐的html，建议断网也能用。

2 效果图：

3 准备：

3.1 图片：18张图片，注意格式，必要时需要修改代码的图片格式。

3.2 背景音乐1.mp3.

3.3 文件结构：

3.4 采用微软vscode编辑器和谷歌浏览器。

4 index.html代码：

<code>




<link>


















 


 


 


 


 




 / 









/<code>

5 style.css代码：

<code>body{
    /*网页背景颜色设置*/
    background: black;
}
.audio-slideshow{
    /*播放进度条的大小设置*/
    /*这里的650与img的图片大小650最好统一起来，好看*/
    width:650px;
    height:520px;
    position:relative;
    margin:0 auto}
.audio-slides img{
    display:block;
    position:absolute;
    /*照片离上面网页的顶格线的距离*/ 

    top:50px;
    /*进度条向左的位置*/
    left:1px}
.time-container{
    position:absolute;
    bottom:25px;
    height:18px;
    font-weight:700;
    /*播放时间字体颜色*/
    color: green;
    /*need，播放进度条*/
    text-shadow:1px 1px 1px rgba(0,0,0,.1)}
.timeline{
    position:absolute;
    width:100%;
    /*进度条初始化背景颜色*/
    background-color: aqua;
    height:20px;bottom:0;left:0;box-shadow:0 1px 2px rgba(0,0,0,.2)}
/*.timeline */
.playhead{
    position:absolute;height:20px;
    /*播放进度条当前进展的颜色设置*/
    background: red;
    width:0}
/*进度条中心标记圆点*/
.marker{
    width:10px;height:10px;border-radius:5px;
    box-shadow:1px 1px 1px rgba(0,0,0,.4) inset;position:absolute;
    /*进度条中的圆孔的颜色设置*/
    background: blue;
    top:5px}
/*need*/
.marker span{padding:5px;
    position:absolute;
    bottom:20px;
    opacity:0;
    left:-50px;
    z-index:-1;
    box-shadow:1px 1px 4px rgba(0,0,0,.5);
    background:#f5f6f6;
    -moz-transition:all .3s ease-in-out;
}/<code>

6 jquery.audioslideshow.js代码：网上下载下来的，很难在线引用。

<code>(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);}
return this.each(function(){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();
$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='',
$marker=$(' '),
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=$('
');$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){var 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>setAudioSlide(nxtSlide);}});$jPlayerObj.bind($.jPlayer.event.play,
function(event){isPlaying=true;$playButton.hide();
$pauseButton.show();});$jPlayerObj.bind($.jPlayer.event.pause,
function(event){isPlaying=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));/<slidescount>/<code>

7 jquery.jplayer.js代码：我是本地引用的，也可以去下载，地址在这里，由于代码是开源的，且太多太密，可读性差，这里就不放了：

<code>#Ok，todo now,enjoy youself./<code>

閱讀更多 易三一世 的文章

關鍵字: 音乐 微软 幻灯片