jQuery easySlider无法在使用C#的ASP.NET中工作

本文关键字：ASP NET 工作 easySlider jQuery | 更新日期: 2023-09-27 18:29:37

我在使jQuery easySlider工作时遇到问题。有人能发现我哪里错了吗？

<%@ Page Title="About  me" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="About.aspx.cs" Inherits="About" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#slider").easySlider();
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>About me</h2>
    <p> Info on the user logged in.</p>
    <p>Name:</p>
    <p>Student number:</p>
    <p>If information displayed is incorrect, please email with corect details.</p>
    <div id="slider">
        <ul>
            <li><a href="#"><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></a></li>
        </ul>
    </div>
</asp:Content>

jQuery文件的名称和路径都是正确的。我似乎找不到问题可能出在哪里了。

编辑当页面被呈现时，HTML代码就是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>About  me</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type='text/javascript' src='Scripts/jquery.cookie.js'></script>
<script type='text/javascript' src='Scripts/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#accordion-menu').dcAccordion({
            eventType: 'click',
            autoClose: true,
            saveState: true,
            disableLink: true,
            showCount: false,
            speed: 'slow'
        });
        $('#slider').easySlider();
    });
</script>
</head>
<body>
    <div id="header">
        <div class="headerLogo"><img src="Styles/images/reading_uni_logo.gif" /></div>
        <div class="loginDisplay">Welcome <span id="HeadLoginName">Username</span>! | Logout</div>
        <div class="news">
        </div>
        <div class="polls"><span id="question">Do you think the library should be open 24 hours?</span>
        <br /><a href="Polls.aspx">See more</a></div>     
    </div>
    <div id="addGadgetButton">Add gadget</div>

    <div id="menu">
        <ul class="menu" id="accordion-menu">
        <li><a href="Default.aspx">Home</a></li>
        <li class="current-parent"><a href="GettingStarted.aspx">Getting Started</a></li>
        <li><a href="#">Apps</a>
            <ul>
                <li><a href="#">Apps 1</a></li>
                <li><a href="#">Apps 2</a></li>
                <li><a href="#">Apps 3</a></li>
            </ul>
        </li>
        <li><a href="#">Social</a>
            <ul>
                <li><a href="#">Social 1</a></li>
                <li><a href="#">Social 2</a></li>
                <li><a href="#">Social 3</a></li>
                <li><a href="#">Social 4</a></li>
            </ul>
        </li>
        <li><a href="About.aspx">About me</a></li>
        </ul>
   </div>
    <div id="main">  
    <h2>
        About me
    </h2>
    <p> Info on the user logged in.</p>
    <p>Name:</p>
    <p>Student number:</p>
    <p>If information displayed is incorrect, please email with corect details.</p>
    <div id="slider">
        <ul>
            <li><a href="#"><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="#"><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></a></li>
        </ul>
    </div>
    </div>
    <div class="clear" />
    <div id="footer">
        <a id="FeedbackHyperLink" href="Feedback.aspx">Feedback</a> |
        <a id="ContactHyperLink" href="Contact.aspx">Contact us</a> |
        <a id="SitemapHyperLink" href="Sitemap.aspx">Sitemap</a> |
        <a id="HelpHyperLink" href="Help.aspx">Help</a>
    </div>
</body>
</html>

jQuery easySlider无法在使用C#的ASP.NET中工作

首先尝试引用jquery-1.7.js:

<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>

由于easySlider1.7.js扩展了jquery，并期望它已经被定义。

任何时候你使用jquery插件（jquery UI或其他什么），记得先引用jquery。我看了easySlider1.7的示例，这些示例首先正确地引用了jquery。一个好的调试技术是从有效的东西开始，即示例，并尝试找出有效和无效之间的区别。在这种情况下，不同之处在于您在插件之后引用了jquery。

在加载easySlider之前，您需要加载jQuery，所以只需更改脚本的顺序：

发件人：

<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>

收件人：

<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>

这样就可以了：）

相关文章：