0
嘿，我從這article靈感爲我的幻燈片。我從網站的源代碼，使其成爲我自己的，當我複製/粘貼到我的項目html & css文件它似乎不加載。CSS3幻燈片Issue
我一遍又一遍地檢查了我的代碼，但仍然沒有設法解決問題。它在單獨的html文件中完美工作，但不在我的項目文件中。
我很感激任何幫助來解決我遇到的這個問題。
截圖：
在單獨的文件工作：
它似乎並沒有加載或顯示http://gyazo.com/712175106aeeb7b636b19937cf2c09c8
項目文件：
http://gyazo.com/cc41a9cd0636c71dac6bb71edc4eff1a
代碼爲我的項目案例：
HTML
<!DOCTYPE html>
在陰暗的小巷
<!-- Page Styling -->
<link href="css/Index.css" rel="stylesheet" type="text/css" />
<!-- Navigation -->
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<!-- Slideshow -->
<link href="css/Slider.css" rel="stylesheet" type="text/css" />
<!-- jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmslideshow.js"></script>
<script type="text/javascript" src="JavaScript/autoplay.js"></script>
<!-- JQuery Plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="JavaScript/modernizr.js"></script>
<!-- Twitter Plugin -->
<script type="text/javascript" src="JavaScript/Twitter.js"></script>
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<div id="wrapper">
<!--<header>
<img src="Images/DarkLanes-Logo.png" alt="header"/>
</header> -->
<!-- Navigation -->
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="gigs.html">Gigs</a></li>
<li><a href="music.html">Music</a></li>
<li>
<a href="#">Biography</a>
<ul>
<li><a href="band profile.html">Band Profile</a></li>
<li><a href="member profiles.html">Member Profiles</a></li>
</ul>
</li>
`<li>
<a href="#">Media</a>
<ul>
<li><a href="images.html">Images</a></li>
<li><a href="videos.html">Videos</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- End of Nav -->
<div class="left">
<h3><a href="index.html">The Dark Lanes</a></h3>
</div>
<div class="right"></div>
<!-- Start of Slideshow -->
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<div class="jms-content">
<h3>Just when I thought...</h3>
<p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes.jpg" alt="image1 />
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<div class="jms-content">
<h3>Holy cannoli!</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/Stage.jpg" alt="image2" />
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<div class="jms-content">
<h3>The Rocker</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="videos.html">View Video!</a>
</div>
<img src="images/Darlanes.jpg" alt="image3" />
</div>
<div class="step" data-color="color-5" data-x="3000">
<div class="jms-content">
<h3>Supercool!</h3>
<p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes2.jpg" alt="image4" />
</div>
<div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">
<div class="jms-content">
<h3>Did you know that...</h3>
<p>Thou that art now the world's fresh ornament and only herald to the gaudy spring</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes3.jpg" alt="image5" />
</div>
</section>
<div id="content">
<!-- Social Media Plugins -->
<div id="facebook">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTDLmusic%2Fposts%2F634412299948671&width=300&height=258&colorscheme=dark&show_faces=true&header=false&stream=false&show_border=false&appId=1407117389534500"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:245px; background-color:#373737;">
</iframe>
</div>
<div class="twitter-timeline">
<a class="twitter-timeline" href="https://twitter.com/TheDarkLanes" data-widget-id="422456331014901760">Tweets by @TheDarkLanes</a>
</div>
<!-- End of Social Media Plugins -->
<div class="video">
<iframe width="600" height="480" src="https://www.youtube.com/embed/hEkpJMxci2Y" frameborder="0">
</iframe>
</div>
<!--Social Media Logos -->
<div class="social-mediabg">
<h3>The Dark Lanes</h3>
</div>
<div class="social-media">
<ul>
<li><a href="https://www.facebook.com/TDLmusic?fref=ts"><img src="Images/facebook.png" alt="facebook"/></a></li>
<li><a href="https://twitter.com/TheDarkLanes"><img src="Images/twitter.png" alt="twitter"/></a></li>
<li><a href="http://www.youtube.com/user/TheDarkLanes"><img src="Images/youtube.png" alt="youtube"/></a></li>
<li><a href="https://soundcloud.com/thedarklanes"><img src="Images/soundcloud.png" alt="soundcloud"/></a></li>
</ul>
</div>
</div>
<div id="footer">
<div class="SiteMap">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="gigs.html">Gigs</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="band profile.html">Band Profile</a></li>
<li><a href="member profiles.html">Member Profiles</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="copyright">
<div class = "copyright">
<h5>© 2014 - The Dark Lanes. All Rights Reserved.</h5>
</div>
</div>
</div>
</body>
CSS
.jms-slideshow {
position: relative;
width: 100%;
height: 650px;
margin-top: 10px;
margin: 0 auto;
}
.jms-wrapper {
width: 995px;
height: 650px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, 0.9);
outline: none;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.color-1 {
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.color-2 {
background-color: #EBBBBC;
background-color: rgba(235, 187, 188, 1);
}
.color-3 {
background-color: #EED9C0;
background-color: rgba(238, 217, 192, 1);
}
.color-4 {
background-color: #DFEBB1;
background-color: rgba(223, 235, 177, 1);
}
.color-5{
background-color: #C1E6E5;
background-color: rgba(193, 230, 229, 1);
}
.step {
width: 995px;
height: 650px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.jms-content{
margin: 0px 0px 300px 20px;
position: relative;
clear: both;
}
.step:not(.active) {
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.step h3{
color: grey;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: grey;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
a.jms-link{
color: #fff;
text-transform: uppercase;
background: #969696; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#727272)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#727272 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#727272 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#727272 100%); /* IE10+ */
background: linear-gradient(top, #969696 0%,#727272 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#727272',GradientType=0); /* IE6-9 */
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 0px;
}
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
z-index: 2000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed',GradientType=0); /* IE6-9 */
}
.jms-arrows{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
/* Not supported style */
.jms-wrapper.not-supported{
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.jms-wrapper.not-supported:after{
content: 'The slideshow functionality is not supported on your device.';
padding: 0px 0px 30px 0px;
text-align: center;
display: block;
}
.jms-wrapper.not-supported .step{
display: none;
position: relative;
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
margin: 20px auto;
}
.jms-wrapper.not-supported .step:first-of-type{
display: block;
}
.jms-wrapper.not-supported .step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
jQuery的前jmpress jQuery插件？嘗試加載另一種方式 – bbuecherl