0

我正在使用 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' }); }); 网络开发人员约翰史密斯

这段文字纯粹是为了填补空白，直到我添加真正的内容。

                </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;
}

谢谢！

4

3 回答 3

2

好的。我可以看到几个小问题。

首先，在您的 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 - 它仍然存在一些问题，但比我们开始时更接近工作。改变这两件事，看看你怎么走。

于 2012-01-10T03:51:31.397 回答
1

您的 CSS 中似乎有一个错字，指的是缺少的 HTML 元素：

.section_container div {
    ...
}

而不是.section_container，您的 CSS 应该是.sections_container（注意复数形式）与您的 HTML 匹配：

<div class="sections_container">
    <div></div>
        ...
    <div></div>
</div>

此外，幻灯片 jQuery 插件需要一个 HTML 元素，其类.slides_container为幻灯片的父级。

由于您偏离了默认标记，因此您需要在 jQuery 函数中提供插件的容器选项：

<script>
    $(function(){
        $('.sections_container').slides({
            preload: true,
            generateNextPrev: true,
            container: 'sections_container'
        });
    });
</script>
于 2012-01-10T04:06:01.693 回答
0

愚蠢的问题，但是鉴于您已经从该示例中逐字复制了代码：您实际引用的文件是否<script src="js/slides.min.jquery.js"></script>存在 - 您是否有一个包含该文件的 js 文件夹？

jQuery 的 1.5.1 版本也已经过时了。它不应该有任何区别，但是您不妨将其更改为 1.7.1

于 2012-01-10T02:18:55.257 回答