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>

但无论我做什么，我都无法让它工作，我现在的网站真的需要它。

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 回答