如何在主页面上使用JQuery Image Slider?

时间:2012-09-22 06:33:31

标签: jquery asp.net .net html css

我遇到的情况是,jquery在没有母版页的aspx页面中工作,但是母版很糟糕。这就是我正在做的...我在Home.aspx页面中使用了jquery图像滑块和mysite。

以下是带有母版页的Home.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Home.aspx.cs" Inherits="WebApplication3.Home" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="main">
        <h1>
            Apple-like Slideshow Gallery</h1>
        <div id="gallery" style="border: 1px solid red;">
            <div id="slides">
                <div class="slide">
                    <img src="Images/imac.jpg" />" width="920" height="400" alt="side" /></div>
                <div class="slide">
                    <img src="Images/iphone.jpg" />
                    width="920" height="400" alt="side" /></div>
                <div class="slide">
                    <img src="Images/macbook.jpg" />
                    width="920" height="400" alt="side" /></div>
            </div>
        </div>
    </div>
</asp:Content>

这是Master.aspx编码:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication3.SiteMaster" %>

<!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 runat="server">
    <title></title>

    <link href="Styles/demo.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                </Items>
            </asp:Menu>
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
    </form>
</body>
</html>

请帮助我在哪个页面放置这两个库:

<link href="Styles/demo.css" rel="stylesheet" type="text/css" />
         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

1 个答案:

答案 0 :(得分:3)

我已经找到了自己问题的答案,所以我想和大家分享一下。 我在Home.aspx中做了一点改动 我添加了脚本路径 内容占位符中的图像滑块。

在这里你可以看到差异:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Home.aspx.cs" Inherits="WebApplication3.Home" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/script.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="main">
        <h1>
            Apple-like Slideshow Gallery</h1>
        <div id="gallery" style="border: 1px solid red;">
            <div id="slides">
                <div class="slide">
                    <img src="Images/imac.jpg" />" width="920" height="400" alt="side" /></div>
                <div class="slide">
                    <img src="Images/iphone.jpg" />
                    width="920" height="400" alt="side" /></div>
                <div class="slide">
                    <img src="Images/macbook.jpg" />
                    width="920" height="400" alt="side" /></div>
            </div>
        </div>
    </div>
</asp:Content>