我正在使用 slidesjs.com (http://slidesjs.com/examples/simple/) 上的脚本，试图将其放入我的网页中。我决定使用一个脚本，而不仅仅是尝试自己用 jQuery 编写它，因为我无法让它工作，而且我怀疑这里发生了同样的问题……不管它是什么。这是页面源代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Smith</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#sections').slides({
preload: true,
generateNextPrev: true
容器:'sections_container' }); }); Web开发人员 约翰·史密斯
在我添加真正的内容之前，这段文字纯粹是为了填补空白。
</p>
<p id="contact">If you'd like to contact me about anything, don't hesitate to email me at j.smith@example.com</p>
<div id="social_media"><img src="images/social_media/facebook.png" /><img src="images/social_media/twitter.png" /><img src="images/social_media/flickr.png" /><img src="images/social_media/youtube.png" /></div>
<div class="clear"></div>
</div>
<div>
<h3 class='heading'>Information</h3>
<p>
<ul>
<li><strong>Name:</strong> John Smith</li>
<li><strong>Location:</strong> Sydney, Australia</li>
</ul>
</p>
<br />
<h3 class='heading'>Achievements & Experience</h3>
<p>
<ul>
<li>Worked at Google</li>
<li>Worked at McDonalds</li>
</ul>
</p>
</div>
</div>
</div>
</body>
CSS，如果有人感兴趣的话。
* {
padding:0;
margin:0;
}
a {
color:white;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
background: url('images/background.png');
font-size:12px;
font-family:arial;
color:#E5E5E5;
}
.sections_container {
width:768px;
display:none;
}
li {
margin-left:20px;
}
.sections_container div {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
display:block;
}
.pagination {
list-style:none;
margin:0;
padding:0;
}
/*
Optional:
Show the current slide in the pagination
*/
.pagination .current a {
color:red;
}
.top {
margin: 15px auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
.section {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
h1,h2,h3,h4,h5,h6 {
}
#subtitle {
color:#919191;
text-align:right;
}
#title {
text-align:right;
}
#profile {
float:left;
height:52px;
width:52px;
}
#youtube_video {
float:right;
padding-left:10px;
}
#contact {
margin-top:8px;
font-weight:bold;
font-style:italic;
}
#social_media {
margin-top:40px;
text-align:center;
}
.heading {
text-align:center;
}
.demphasis {
color:#9E9E9E;
}
.clear {
clear:both;
}
谢谢!
最佳答案
好的。我可以看到几个小问题。
首先，在您的 CSS 中引用 .section_container ，而在 HTML 中它是 <div class="sections_container"> - 注意中间的“s”。部分相同。
其次，SlideJS 似乎默认为“slides_container”。重命名您的 div，或在初始化时设置容器名称:
$('#sections').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
我在 http://jsfiddle.net/jCFeQ/ 创建了一个小 jsFiddle - 它仍然存在一些问题，但比我们开始时更接近工作。改变这两件事，看看你会怎样。
关于javascript - jQuery 'Slides' 无法运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8797674/