使用JQuery和CSS制作图库

Question

使用JQuery和CSS制作图库

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

Run Code Online (Sandbox Code Playgroud)

但无论我做什么,我都无法让这个工作,我真的需要它为我现在的网站.

Answer 1

Aks*_*iri 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	844 次
最近记录：	12 年，7 月前