我正在尝试重新创建一个使用SlideJS的网站，其中每个按钮点击都会显示一个标题。我有完全相同的文件，但是我有一个问题，使图像和字幕显示和保持。
以下是该网站的完整功能。
i.gyazo.com/2db38f72dff333d3eab898b5981151d1.gif
链接到功能齐全的设计：http://web-beta.archive.org/web/20161006125524/http://murray-engineering.com
现在这是我的问题：
i.gyazo.com/32905aca742dd967d1b00d5ff01eb1ce.gif
我试图添加的图像出现，然后立即离开屏幕。此外，字幕根本没有出现。
这是我的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/banner-styles.css">
<link rel="stylesheet" type="text/css" href="css/iconochive.css">
<meta name="viewport" content="width=920">
<title>Akhetian Engineering</title>
<!--[if lt IE 9]>
<script src="http://murray-engineering.com/wp-content/themes/murray_engineering/js/html5.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/web-beta.archive.org\/web\/20161006125524\/https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"https:\/\/web-beta.archive.org\/web\/20161006125524\/http:\/\/murray-engineering.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.5.3"}};
!function(a,b,c){function d(a){var c,d,e,f=b.createElement("canvas"),g=f.getContext&&f.getContext("2d"),h=String.fromCharCode;if(!g||!g.fillText)return!1;switch(g.textBaseline="top",g.font="600 32px Arial",a){case"flag":return g.fillText(h(55356,56806,55356,56826),0,0),f.toDataURL().length>3e3;case"diversity":return g.fillText(h(55356,57221),0,0),c=g.getImageData(16,16,1,1).data,d=c[0]+","+c[1]+","+c[2]+","+c[3],g.fillText(h(55356,57221,55356,57343),0,0),c=g.getImageData(16,16,1,1).data,e=c[0]+","+c[1]+","+c[2]+","+c[3],d!==e;case"simple":return g.fillText(h(55357,56835),0,0),0!==g.getImageData(16,16,1,1).data[0];case"unicode8":return g.fillText(h(55356,57135),0,0),0!==g.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script><script src="js/wp-emoji-release.min.js" type="text/javascript"></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body>
<div id="main" class="site-main">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<a href="index.html" title="Murray Engineering" rel="home" class="site-logo"></a>
</div>
<nav id="site-navigation" class="navigation-main" role="navigation">
<h1 class="menu-toggle">Menu</h1>
<div class="screen-reader-text skip-link"><a href="https://web-beta.archive.org/web/20161006125524/murray-engineering.com#content" title="Skip to content">Skip to content</a></div>
<div class="menu-main-nav-container"><ul id="menu-main-nav" class="menu"><li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-64"><a>projects</a>
<ul class="sub-menu">
<li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="projects/educational-facilities/">Education</a></li>
<li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"><a href="projects/projects-healthcare/">Health Care</a></li>
<li id="menu-item-131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-131"><a href="projects/projects-historic-preservation/">Historic Preservation</a></li>
<li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129"><a href="projects/cultural-religious-buildings/">Institutional + Cultural</a></li>
<li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="projects/projects-residential-2/">Multi-Family Residential</a></li>
<li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="projects/multi-family-residential/">Residential</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="projects/retail/">Retail</a></li>
<li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130"><a href="projects/special-structures/">Special Structures</a></li>
</ul>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="services">services</a></li>
<li id="menu-item-713" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-713"><a href="people">about</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="contact">contact</a></li>
</ul></div> </nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div class="site-body">
<div id="gallery" class="galleryWrap">
<div class="slides_container">
<div class="slides_control"><div class="nest">
<img width="927" height="500" src="https://placehold.it/927x500" class="attachment-fullsize size-fullsize" alt="home_" srcset="https://placehold.it/927x500" sizes="(max-width: 927px) 100vw, 927px">
<div class="galleryDescription">
</div>
</div><div class="nest">
<img width="920" height="495" src="https://placehold.it/927x500" class="attachment-fullsize size-fullsize" alt="The Pederson house, Pederson, Kohn Fox, architect" srcset="https://placehold.it/927x500" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper bottom">
<div class="captionText">Residential</div>
</div>
<div class="galleryDescription ">
The Pederson house, Pederson, Kohn Fox, architect </div>
</div><div class="nest">
<img width="920" height="495" src="images/institutional-cultural.jpg" class="attachment-fullsize size-fullsize" alt="The Granary, Gallery, Steven Lerner, architect" srcset="https://placehold.it/927x500" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper bottom-left ">
<div class="captionText">Institutional + Cultural</div>
</div>
<div class="galleryDescription ">
The Granary, Gallery, Steven Lerner, architect </div>
</div><div class="nest">
<img width="920" height="495" src="images/residential-buildings.jpg" class="attachment-fullsize size-fullsize" alt="957 Pacific Street, Brooklyn, NY, Loading Dock 5 Architects" srcset="http://murray-engineering.com/wp-content/uploads/2013/06/residential-buildings.jpg 920w, http://murray-engineering.com/wp-content/uploads/2013/06/residential-buildings-300x161.jpg 300w" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper right-residential ">
<div class="captionText">Multi Family Residential</div>
</div>
<div class="galleryDescription">
957 Pacific Street, Brooklyn, NY, Loading Dock 5 Architects </div>
</div><div class="nest">
<img width="920" height="495" src="images/health-care.jpg" class="attachment-fullsize size-fullsize" alt="Bellevue Cooling Center, Goldman Copeland Mechanical Consulting Engineers" srcset="http://murray-engineering.com/wp-content/uploads/2013/06/health-care.jpg 920w, http://murray-engineering.com/wp-content/uploads/2013/06/health-care-300x161.jpg 300w" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper right-health ">
<div class="captionText">Health Care</div>
</div>
<div class="galleryDescription">
Bellevue Cooling Center, Goldman Copeland Mechanical Consulting Engineers </div>
</div><div class="nest">
<img width="920" height="495" src="images/historic-preservation.jpg" class="attachment-fullsize size-fullsize" alt="Cathedral of Saint Patrick, New York City" srcset="http://murray-engineering.com/wp-content/uploads/2013/06/historic-preservation.jpg 920w, http://murray-engineering.com/wp-content/uploads/2013/06/historic-preservation-300x161.jpg 300w" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper left ">
<div class="captionText">Historic Preservation</div>
</div>
<div class="galleryDescription">
Cathedral of Saint Patrick, New York City </div>
</div><div class="nest">
<img width="920" height="495" src="images/special-structures.jpg" class="attachment-fullsize size-fullsize" alt="Rockaway Park Comfort Station, WXY Studio" srcset="http://murray-engineering.com/wp-content/uploads/2013/06/special-structures.jpg 920w, http://murray-engineering.com/wp-content/uploads/2013/06/special-structures-300x161.jpg 300w" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper bottom">
<div class="captionText">Special Structures</div>
</div>
<div class="galleryDescription">
Rockaway Park Comfort Station, WXY Studio </div>
</div><div class="nest">
<img width="920" height="495" src="images/retail_homeslider.png" class="attachment-fullsize size-fullsize" alt="Armani Corporate Offices + Store, NYC" srcset="http://murray-engineering.com/wp-content/uploads/2013/06/retail_homeslider.png 920w, http://murray-engineering.com/wp-content/uploads/2013/06/retail_homeslider-300x161.png 300w" sizes="(max-width: 920px) 100vw, 920px">
<div class="captionWrapper right-residential ">
<div class="captionText">Retail</div>
</div>
<div class="galleryDescription">
Armani Corporate Offices + Store, NYC</div>
</div></div>
</div><!-- slides_container -->
</div> <!-- site body -->
</div><!-- site main-->
</div><!-- site -->
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/skip-link-focus-fix.js"></script>
<script type="text/javascript" src="js/comment-reply.min.js"></script>
<script type="text/javascript" src="js/wp-embed.min.js"></script>
<script src="js/jquery-1.5.2.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#gallery').slides({
preload: false,
play: 4000,
effect: 'fade',
crossfade: true,
slideSpeed: 350,
fadeSpeed: 500,
currentClass: 'current', // string, Class name for current class
generatePagination: true,
animationStart: function(current){
$('.galleryDescription').removeClass("show");
$('.captionWrapper').removeClass("show");
},
animationComplete: function(current){
$('.galleryDescription').addClass("show");
$('.captionWrapper').addClass("show");
},
slidesLoaded: function() {
$('.galleryDescription').addClass("show");
$('.captionWrapper').addClass("show");
}
});
});
</script>
</body></html>