2

私はこれを理解しようとしてかなり長い間立ち上がってきました。このウェブサイトhttp://css3.bradshawenterprises.com/slide1/で、これは私にコードとすべてを与えて、私はそれがそうであるべきであるように私のウェブページにそれを差し込んだ。

私は今それを更新しましたこれは私のコードです誰かがそれを手伝ってくれます...

     <html>
    <head>

    <style type="text/css">
    #slide1_controls span {
        padding-right:2em;
        cursor:pointer;
    }
    #slide1_container {
        width:450px;
        height:281px;
        overflow:hidden;
        position:relative;
    }
    #slide1_images {
        position:absolute;
        left:0px;
        width:1800px;
        -webkit-transition:all 1.0s ease-in-out;
        -moz-transition:all 1.0s ease-in-out;
        -o-transition:all 1.0s ease-in-out;
        -ms-transition:all 1.0s ease-in-out;    
        transition:all 1.0s ease-in-out;
    }
    #slide1_images img {
        padding:0;
        margin:0;
        float:left;
    }
    </style>

<script type="text/javscript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $("#slide1-1").click(function() {
            $("#slide1_images").css("left","0");
        });
        $("#slide1-2").click(function() {
            $("#slide1_images").css("left","-450px");
        });
        $("#slide1-3").click(function() {
            $("#slide1_images").css("left","-900px");
        });
        $("#slide1-4").click(function() {
            $("#slide1_images").css("left","-1350px");
        });
    });

    </script>


    </head>
    <body>


    <div id="slide1_container">
        <div id="slide1_images">
            <img src="pictures/1.jpg" />
            <img src="pictures/2.jpg" />
            <img src="pictures/3.jpg" />
            <img src="pictures/4.jpg" />        
        </div>
    </div>
    <p id="slide1_controls">
        <span id="slide1-1">Image 1</span>
        <span id="slide1-2">Image 2</span>
        <span id="slide1-3">Image 3</span>
        <span id="slide1-4">Image 4</span>
    </p>

    </body>
    </html>

しかし、私が何をしても、これを機能させることはできず、現在のWebサイトで本当に必要です。

4

2 に答える 2

5

コードにjqueryファイルを含めます。

チュートリアル

<script src="jquery.js"></script>
    <script type="text/javascript" >
    $(document).ready(function() {
        $("#slide1-1").click(function() {
            $("#slide1_images").css("left","0");
        });
        $("#slide1-2").click(function() {
            $("#slide1_images").css("left","-450px");
        });
        $("#slide1-3").click(function() {
            $("#slide1_images").css("left","-900px");
        });
        $("#slide1-4").click(function() {
            $("#slide1_images").css("left","-1350px");
        });
    });
    </script>
    <div id="slide1_container">
        <div id="slide1_images">
            <img src="/images/Cirques.jpg" />
            <img src="/images/Clown%20Fish.jpg" />
            <img src="/images/Stones.jpg" />
            <img src="/images/Summit.jpg" />        
        </div>
    </div>
    <p id="slide1_controls">
        <span id="slide1-1">Image 1</span>
        <span id="slide1-2">Image 2</span>
        <span id="slide1-3">Image 3</span>
        <span id="slide1-4">Image 4</span>
    </p>
于 2012-04-21T06:27:34.217 に答える
0

jQueryファイルを含めていない場合は、このjQueryコードを実行するためにそれも含める必要があります。

$(document).ready(function() {
$("#slide1-1").click(function() {
    $("#slide1_images").css("left","0");
});
$("#slide1-2").click(function() {
    $("#slide1_images").css("left","-450px");
});
$("#slide1-3").click(function() {
    $("#slide1_images").css("left","-900px");
});
$("#slide1-4").click(function() {
    $("#slide1_images").css("left","-1350px");
});

}）;

于 2012-04-21T06:32:11.167 に答える