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

使用该插件，元素由代码生成。确保您已上传图像并检查您的 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 回答
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 回答