应用错误收集

在ASP.NET页面中安装jQuery图像滑块？

时间：2016-01-14 12:18:13

标签： javascript jquery asp.net

我正在尝试在使用母版页的页面中安装此图像滑块： http://www.c-sharpcorner.com/UploadFile/rohatash/jquery-image-slider-in-Asp-Net/ 在这个例子中，他使用一个页面而不使用母版页，因此我创建了新页面（这次不使用母版页）并且工作正常。

这就是我的代码在基于母版页的页面中的结果：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <script src="Scripts2/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
    <script src="Scripts2/Demo.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
   //some content here
        <div class="slider-wrapper theme-default">
        <div id="nivo-slider" class="nivoSlider">
            <img src="1.jpg" alt="" />
            <img src="2.jpg" alt="" />
            <img src="3.jpg" alt="" />
            <img src="4.jpg" alt="" />
        </div>
    </div>
        <script type="text/javascript">
        $(window).load(function () {
            $('#nivo-slider').nivoSlider();
        });
    </script>
</asp:Content>

上面的代码不起作用！另一方面，这段代码工作正常：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>        
    <script src="Scripts2/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
    <script src="Scripts2/Demo.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
   <div class="slider-wrapper theme-default">
        <div id="nivo-slider" class="nivoSlider">
            <img src="1.jpg" alt="" />
            <img src="2.jpg" alt="" />
            <img src="3.jpg" alt="" />
            <img src="4.jpg" alt="" />
        </div>
    </div>
    <script type="text/javascript">
        $(window).load(function () {
            $('#nivo-slider').nivoSlider();
        });
    </script>
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

嘿，我尝试了你提到的代码没有为你工作的主页，它对我来说很好。也许你的母版页有问题。这是完整的代码，对我来说很好。

Default.aspx的

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestUpdatePanel.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Scripts2/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
    <script src="Scripts2/Demo.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

    <div class="slider-wrapper theme-default">
        <div id="nivo-slider" class="nivoSlider">
            <img src="1.jpg" alt="" />
            <img src="2.jpg" alt="" />
            <img src="3.jpg" alt="" />
            <img src="4.jpg" alt="" />
        </div>
    </div>
        <script type="text/javascript">
        $(window).load(function () {
            $('#nivo-slider').nivoSlider();
        });
    </script>
</asp:Content>

MasterPage.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="TestUpdatePanel.MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>