使用JQuery和CSS制作图片库

Question

我已经花了很长时间试图解决这个问题。 在此网站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>

但是，无论我做什么，我都无法正常使用它，而我当前的网站确实需要它。

Answer 1

在您的代码中包含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>

Answer 2

如果您尚未包含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和CSS制作图片库

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-04-21 06:27:34

解决方案2
0 2012-04-21 06:32:11

使用JQuery和CSS制作图片库

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-04-21 06:27:34

解决方案2 0 2012-04-21 06:32:11

解决方案1
5 已采纳 2012-04-21 06:27:34

解决方案2
0 2012-04-21 06:32:11