0

私はslidesjs.com（http://slidesjs.com/examples/simple/）でスクリプトを使用して、それを自分のWebページに入れようとしています。スクリプトを使用することにしました。スクリプトを機能させることができなかったため、自分で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開発者JohnSmith

このテキストは、実際のコンテンツを追加するまで、純粋にスペースを埋めるためのものです。

                </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を作成しました。まだいくつかの問題がありますが、開始時よりも動作に近づいています。これら2つのことを変更して、どのように進むかを確認してください。

于 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プラグイン.slides_containerは、スライドの親としてのクラスを持つHTML要素を想定しています。

デフォルトのマークアップから逸脱しているため、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 に答える