jQuery“幻灯片”不运作

发布于 2024-12-25 14:05:02 字数 4250 浏览 1 评论 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 [email protected]</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;
}

谢谢！

原文

I am using the script at slidesjs.com (http://slidesjs.com/examples/simple/), trying to put it into my webpage. I decided to use a script and not just attempt to write it in jQuery myself as I could not get it to work, and I suspect the same problem is occurring here..whatever it may be. Here is the page source code.

<!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

container: 'sections_container'
});
});

Web Developer
John Smith

This text is purely to fill space until I add real content.

                </p>
                <p id="contact">If you'd like to contact me about anything, don't hesitate to email me at [email protected]</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>

The CSS if anyone is interested.

* {
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;
}

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄风 2025-01-01 14:05:02

好的。我可以看到一些小问题。

首先，在 CSS 中引用 .section_container，而在 HTML 中引用

- 请注意中间的“s”。节相同。

其次，看起来 SlideJS 默认为“slides_container”。重命名你的 div，或者在初始化时设置容器名称：

 $('#sections').slides({
     preload: true,
     generateNextPrev: true,
     container: 'sections_container'
 });

我在 http:// 处创建了一个小 jsFiddle /jsfiddle.net/jCFeQ/ - 它仍然存在一些问题，但比我们开始时更接近工作。改变这两件事，看看你会怎样。

OK. I can see a couple of wee issues.

Firstly, in your CSS you reference .section_container, whereas in the HTML it's <div class="sections_container"> - note the 's' in the middle. Same for section/s.

Secondly, it looks like SlideJS defaults to "slides_container". Either rename your divs, or set the container name when you're initializing it:

 $('#sections').slides({
     preload: true,
     generateNextPrev: true,
     container: 'sections_container'
 });

I've created a little jsFiddle at http://jsfiddle.net/jCFeQ/ - it still has some issues, but is closer to working than when we started. Change those two things and see how you go.

回复收藏 0 原文

复古式 2025-01-01 14:05:02

您的 CSS 中似乎存在拼写错误，指的是缺少 HTML 元素：

.section_container div {
    ...
}

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

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

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

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

<script>
    $(function(){
        $('.sections_container').slides({
            preload: true,
            generateNextPrev: true,
            container: 'sections_container'
        });
    });
</script>

It appears you have a typo in your CSS that refers to a missing HTML element:

.section_container div {
    ...
}

Instead of .section_container, your CSS should be .sections_container (note the plural) which matches your HTML:

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

Additionally, the Slides jQuery Plugin expects an HTML element with a class of .slides_container as the parent of the slides.

Since you've deviated from the default markup, you'll need to supply the plugin's container option in your jQuery function:

<script>
    $(function(){
        $('.sections_container').slides({
            preload: true,
            generateNextPrev: true,
            container: 'sections_container'
        });
    });
</script>

回复收藏 0 原文