Question

我正在尝试制作像Grooveshark再现列表或You管再现列表一样的幻灯片效果。到目前为止我所做的是实现按钮和栏，但现在我陷入幻灯片效果实现。这是我的html文件的代码：

    <!DOCTYPE html>
    <html>
        <head>
            <title>CAMBIAR...</title>
            <link rel="stylesheet" href="html 5/slider.css" />
            <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
            <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
        </head>

        <body>
            <div id="slider">
                <div id="atras">&lt</div>
                <div id="content">
                    &nbsp;
                </div>
                <div id="adelante">&gt</div>
                <div id="operaciones">
                    <div id="add">+</div>
                </div>
                <div id="footer"></div>
            </div>
            <script>
                $(document).ready(
                    function () {
                        var cuenta = 0;
                        var elementos = Array();

                        $("#slider #atras").mousedown(function() {
                            $(this).css({"box-shadow": "inset 5px 0px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "white"});
                        });

                        $("#slider #atras").mouseup(function() {
                            $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "black"});
                        });

                        $("#slider #adelante").mousedown(function() {
                            $(this).css({"box-shadow": "inset -5px 0px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "white"});
                        });

                        $("#slider #adelante").mouseup(function() {
                            $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "black"});
                        });

                        $("#slider #operaciones #add").click( function() {
                            var new_element = $("<div class='element' id='unique'>"+ (++cuenta) +"</div>");
                            //new_element.insertAfter($("#slider #content .element:last-child"));
                            $("#slider #content").prepend(new_element);
                        });
                    });
            </script>
        </body>
    </html>

这是我的CSS文件：

    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background: #57595a;
        font-family: Helvetica, sans-serif;
        font-size: 16px;
        text-align: center;
    }

    #slider {
        border: 5px dotted white ;
        margin: 20px auto;
        line-height: 6.3em;
        padding: 10px;
        width: 95%;
    }

    #slider #atras {
        background-color: #CCCCCC;
        border-radius: 0.25em;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        color: black;
        float: left;
        height: 100%;
        width: 3%;
    }

    #slider #atras:hover {
        cursor: pointer;
    }
    #slider #content {
        text-align: left;
        float: left;
        width: 74%;
    }

    #slider #adelante {
        background-color: #CCCCCC;
        border-radius: 0.25em;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        color: black;
        float: left;
        height: 100%;
        width: 3%;
    }

    #slider #adelante {
        cursor: pointer;
    }

    #slider #operaciones {
        float: left;
        width: 20%;
    }

    #slider #content .element {
        background: orange;
        border-radius: 0.5em;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
        color: white;
        display: inline-block;
        height: 100px;
        margin: auto 5px;
        text-align: center;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        width: 100px;
    }

    #slider #operaciones #add {
        background-color: #f99200;
        border-radius: 0.5em;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
        color: white;
        display: inline-block;
        height: 50px;
        vertical-align: middle;
        margin: 2px 5px;
        line-height: 3.2em;
        text-align: center;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        width: 50px;
    }

    #slider #content .element:hover {
        background-color: #8a8a8a;
        color: white;
    }

    #slider #operaciones #add:hover {
        background-color: rgb(97, 103, 106);
        cursor: pointer;
    }

    #footer {
        clear: both;
    }

我希望有人可以帮我解决这个问题。任何方法都是有效的，我只需要知道该怎么做，而不是完成它。谢谢，我感谢大家的帮助。

Answer 1

对于jQuery Mobile，可以使用过渡属性

进行幻灯片效果

<a href="#newpage" data-transition="slide">click here</a>

在jQuery中创建幻灯片效果

1 个答案: