1

easySlider jquery プラグインを使用しようとしています。再現したいだけです。

http://cssglobe.com/lab/easyslider1.5/01.html

一覧に画像が表示されますが、次/前のリンクが表示されません。

デモ ページにない場合でも、HTML に追加する必要がありますか?

コードは次のとおりです。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasySlider.aspx.cs" Inherits="jQuery.EasySlider" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        img {
            border: none;
        }

        pre {
            display: block;
            font: 12px "Courier New", Courier, monospace;
            padding: 10px;
            border: 1px solid #bae2f0;
            background: #e3f4f9;
            margin: .5em 0;
            width: 500px;
        }

        #slider ul, #slider li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #slider li {
            width: 696px;
            height: 241px;
            overflow: hidden;
        }

        span#prevBtn {
        }

        span#nextBtn {
        }
    </style>
    <script src="easySlider1.5.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#slider").easySlider();

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="slider">
                <ul>
                    <li><a href="http://templatica.com/preview/30"><img src="images/slider/01.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/7"><img src="images/slider/02.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/25"><img src="images/slider/03.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/26"><img src="images/slider/04.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/27"><img src="images/slider/05.jpg" alt="Css Template Preview" /></a></li>
                </ul>

            </div>
            <a id="nextBtn"></a>
            <a id="prevBtn"></a>
        </div>
    </form>
</body>
</html>

前もって感謝します。

4

2 に答える 2

0

アンカータグにテキストがありません。

<a id="nextBtn"></a>    
<a id="prevBtn"></a>

アンカータグにテキストを追加します

<a id="nextBtn"> Next </a>    
<a id="prevBtn"> Previous </a>
于 2010-09-13T14:08:41.070 に答える
0

そのプラグインを使用すると、要素はコードによって生成されます。画像をアップロードしたことを確認し、css をチェックして、重要なものを上書きしていないことを確認してください。何が起こっているのかを確認できるように、コードを例に投稿できますか?

アップデート：

65 行目と 66 行目では、

span#prevBtn{}
span#nextBtn{}

一見すると、次のコードがすべて欠落していると思います。

#prevBtn, #nextBtn,
    #slider1next, #slider1prev{ 
        display:block;
        width:35px;
        height:35px;
        position:absolute;
        left:-15px;
        top:110px;
        z-index:1000;
        }   
    #nextBtn, #slider1next{ 
        left:940px;
        }                                                       
    #prevBtn a, #nextBtn a{  
        display:block;
        position:relative;
        width:53px;
        height:53px;
        background:url(../images/btn_prev.png) no-repeat 0 0;   
        }   
    #nextBtn a, #slider1next a{ 
        background:url(../images/btn_next.png) no-repeat 0 0;   
        }

div の幅と高さに応じて、left属性を操作して btns を正しく配置します。

于 2010-09-13T13:39:21.477 に答える