Javascript 使用JQuery和CSS制作图像库_Javascript_Jquery_Html_Css

Javascript 使用JQuery和CSS制作图像库

javascript jquery html css

Javascript 使用JQuery和CSS制作图像库,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经起床很长时间了，想弄明白这一点。在这个网站上，这给我的代码和一切，我已经插入到我的网页，就像它应该是我现在更新了这是我的代码有人能帮我吗 <html> <head> <style type="text/css"> #slide1_controls span { padding-right:2em; cursor:pointer; } #slide1_container

我已经起床很长时间了，想弄明白这一点。在这个网站上，这给我的代码和一切，我已经插入到我的网页，就像它应该是

我现在更新了这是我的代码有人能帮我吗

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


#滑块1\u控制范围{
右侧填充：2米；
光标：指针；
}
#滑动容器{
宽度：450px；
高度：281px；
溢出：隐藏；
位置：相对位置；
}
#幻灯片1\u图像{
位置：绝对位置；
左：0px；
宽度：1800px；
-webkit过渡：所有1.0都易于输入输出；
-moz过渡：所有1.0都易于输入输出；
-o-transition：所有1.0都易于输入输出；
-ms过渡：所有1.0都易于输入输出；
过渡：所有1.0都易于输入输出；
}
#幻灯片1\u图像img{
填充：0；
保证金：0；
浮动：左；
}
$（文档）.ready（函数（）{
$（“#幻灯片1-1”）。单击（函数（）{
$（“#slide1_images”）.css（“左”、“0”）；
});
$（“#幻灯片1-2”）。单击（函数（）{
$（“#slide1_images”）.css（“左”，“-450px”）；
});
$（“#幻灯片1-3”）。单击（函数（）{
$（“#slide1_images”）.css（“左”，“-900px”）；
});
$（“#幻灯片1-4”）。单击（函数（）{
$（“#slide1_images”）.css（“左”，“-1350px”）；
});
});

图1
图2
图3
图4

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

在代码中包含jquery文件


$（文档）.ready（函数（）{
$（“#幻灯片1-1”）。单击（函数（）{
$（“#slide1_images”）.css（“左”、“0”）；
});
$（“#幻灯片1-2”）。单击（函数（）{
$（“#slide1_images”）.css（“左”，“-450px”）；
});
$（“#幻灯片1-3”）。单击（函数（）{
$（“#slide1_images”）.css（“左”，“-900px”）；
});
$（“#幻灯片1-4”）。单击（函数（）{
$（“#slide1_images”）.css（“左”，“-1350px”）；
});
});

图1
图2
图3
图4

如果您没有包含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");
});

}))

您能显示完整的标记吗？请确保是否包含jquery库文件，并检查我的答案。您刚刚在html页面的错误区域中放置了脚本和样式标记。这两个标签总是放在head标签中。完整的标记对我来说太大了，我想我要问的是我如何正确插入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");
});