Question

我正在尝试使用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>

提前致谢。

Answer 1

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

Answer 2

您错过了锚标记中的文字，即。，

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

在锚标记中添加一些文字

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

Easy Slider jquery - 无法看到下一个按钮

2 个答案: