Javascript CSS3幻灯片放映问题
嘿，我从这张幻灯片中得到了灵感。我使用了网站上的源代码使其成为我自己的，当我将html和css复制/粘贴到我的项目html和css文件时，它似乎没有加载 我一遍又一遍地检查代码，但仍然没有解决问题。它在单独的html文件中工作得很好，但在我的项目文件中却不行 如果能帮我解决这个问题，我将不胜感激 截图： 在单独的文件中工作： 无法加载或显示的项目文件： 我的项目验证代码： HTMLJavascript CSS3幻灯片放映问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嘿，我从这张幻灯片中得到了灵感。我使用了网站上的源代码使其成为我自己的，当我将html和css复制/粘贴到我的项目html和css文件时，它似乎没有加载 我一遍又一遍地检查代码，但仍然没有解决问题。它在单独的html文件中工作得很好，但在我的项目文件中却不行 如果能帮我解决这个问题，我将不胜感激 截图： 在单独的文件中工作： 无法加载或显示的项目文件： 我的项目验证代码： HTML <!DOCTYPE html> <!DOCTYPE html> 您应该在jmpre
<!DOCTYPE html>
<!DOCTYPE html>
您应该在jmpress插件之前加载jQuery:） jmpress是一个jQuery插件，因此如果您以前没有加载它，它将无法工作
罗斯帕姆解决方案有限公司
.步骤{
宽度：100%；
位置：相对位置；
}
.步骤：未（.active）{
不透明度：1；
过滤器：α（不透明度=99）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=99）”；
}
.step:未（.active）a.jms-link{
不透明度：1；
边缘顶端：40px；
}
就在我想。。。
我们渴望从最美丽的生物身上得到更多，从而使美丽的玫瑰永不凋谢
天哪，卡纳利！
但是，成熟的人到了死亡的时候，他的温柔的继承人可能会记住他
超级冷！
在富足的地方制造饥荒，你自己是你的敌人，对你甜蜜的自我太残忍了
你知道吗。。。
你现在是世界上最新的装饰品，也是花哨春天的唯一使者
$（函数（）{
变量jmpressOpts={
动画：{transitionDuration:'0.8s'}
};
$（'#jms slideshow'）.jmsslideshow（$.extend（true，{jmpressOpts:jmpressOpts}{
自动播放：对，
bgColorSpeed:'0.8s'，
箭头：假
}));
});
jQuery之前的jmpress jQuery插件？尝试以另一种方式加载。这是html文件的外观。还要确保加载javascript所需的所有插件。
<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>
.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;
}
<!DOCTYPE html>
<head>
<title>RosePam Solutions Ltd</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<!-- load jQuery and the plugin -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<!-- jmpress plugin -->
<script type="text/javascript" src="js/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="js/jquery.jmslideshow.js"></script>
<script type="text/javascript" src="js/modernizr.custom.48780.js"></script>
<noscript>
<style>
.step {
width: 100%;
position: relative;
}
.step:not(.active) {
opacity: 1;
filter: alpha(opacity=99);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}
.step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
</style>
</noscript>
</head>
<body class="body">
<div class="content">
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<img src="images/The Dark Lanes.jpg" alt="image1 />
<div class="jms-content">
<h3><span>Just when I thought...</span></h3>
<p><span>From fairest creatures we desire increase, that thereby beauty's rose might never die</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<img src="images/Stage.jpg" alt="image2" />
<div class="jms-content">
<h3><span>Holy cannoli!</span></h3>
<p><span>But as the riper should by time decease, his tender heir might bear his memory</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<img src="images/Darlanes.jpg" alt="image3" />
<div class="jms-content">
<h3><span>Supercool!<span></h3>
<p><span>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-5" data-x="3000">
<img src="images/The Dark Lanes3.jpg" alt="image5" />
<div class="jms-content">
<h3><span>Did you know that...</span></h3>
<p><span>Thou that art now the world's fresh ornament and only herald to the gaudy spring</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
</section>
<script type="text/javascript">
$(function() {
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));
});
</script>
</div>
</body>