0

私はこのスライド ショーを使用しています。すべてのスクリプトと CSS を ASP.net MVC プロジェクトのマスター ページに含めました。しかし、スライドのすべての要素が私のページに表示されませんでした。次と前のボタンのみが機能し、画像とテキストは機能しませんでした。私のマスターページにはスライドのスクリプトしかないので、競合スクリプトやjqueryの問題はありません。

ページのソースを表示し、外部の CSS とスクリプトの各リンクをクリックすると、正常に動作します。

しかし、自分のページがどうなるかまったくわかりません。

これは私が含めるコードとHTMLです

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Import Namespace="Web.Models" %>
<%@ Import Namespace="MvcSiteMapProvider.Web.Html" %>
<%@ Import Namespace="System.IO" %>
<!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">
<head id="Head1" runat="server">
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
Home Page    
<link rel="stylesheet" type="text/css" href="../../Content/homegallery/css/style.css" />
<link rel="stylesheet" type="text/css" href="../../Content/homegallery/css/demo.css" />
</head>
<body>

  <br /><br /><br /> <br /><br /><br /> <br /><br /><br />
  <script type="text/javascript" src="../../Content/homegallery/js/jquery.min.js"> </script>
  <script type="text/javascript" src="../../Content/homegallery/js/jmpress.min.js"></script>
  <script type="text/javascript" src="../../Content/homegallery/js/jquery.jmslideshow.js"></script>
  <script type="text/javascript" src="../../Content/homegallery/js/modernizr.custom.48780.js"></script>

  <noscript>
   <style>
      .step {
        width: 100%;
        position: relative;
      }
      .step:not(.active) {
        opacity: 1;
        filter: alpha(opacity=99);
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
       }
     .step:not(.active) a.jms-link{
        opacity: 1;
        margin-top: 40px;
     }
 </style>
 </noscript>
    <div id="home" style="width: 890px; margin-left: 20px; margin-top:28px; margin-bottom: -50px;">
    <div class="container">
        <section id="jms-slideshow" class="jms-slideshow">
            <div class="step" data-color="color-1">
                <div class="jms-content">
                    <h3>Just when I thought...</h3>
                    <p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
                    <a class="jms-link" href="#">Read more</a>
                </div>
                <img src="../../Product/2309.jpg" />
            </div>
            <div class="step" data-color="color-1" data-y="500" data-scale="0.4" data-rotate-x="30">
                <div class="jms-content">
                    <h3>Holy cannoli!</h3>
                    <p>But as the riper should by time decease, his tender heir might bear his memory</p>
                    <a class="jms-link" href="#">Read more</a>
                </div>
                <img src="../../Product/2070.jpg" />
            </div>
        </section>
        </div>
<script type="text/javascript">
    $(function () {
        $('#jms-slideshow').jmslideshow();
    });
</script>
</div>


どなたかアイデアをお願いします。

本当にありがとうございます。

4

2 に答える 2

0

以下を確認してください。

  1. スクリプトを含める順序。
  2. ブラウザからhtmlページを保存し、コードをサイトの例と比較します。1行ずつ。
  3. imgのURLとテキストを含むvaribaleを確認してください。スペルミスがある可能性があります
于 2012-09-21T09:06:06.570 に答える
0

以下のコードは私にとってはうまくいきます。css、画像、スクリプトの順番とURLを確認してください

<link href="Scripts/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jmpress.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.jmslideshow.js"></script>
<script type="text/javascript" src="Scripts/modernizr.custom.48780.js"></script>
<noscript>
        <style>
            .step
            {
                width: 100%;
                position: relative;
            }
            .step:not(.active)
            {
                opacity: 1;
                filter: alpha(opacity=99);
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
            }
            .step:not(.active) a.jms-link
            {
                opacity: 1;
                margin-top: 40px;
            }
        </style>
    </noscript>


<div id="home" style="width: 890px; margin-left: 20px; margin-top: 28px; margin-bottom: -50px;">
            <div class="container">
                <section id="jms-slideshow" class="jms-slideshow">
                    <div class="step" data-color="color-1">
                        <div class="jms-content">
                            <h3>
                                Just when I thought...</h3>
                            <p>
                                From fairest creatures we desire increase, that thereby beauty's rose might never
                                die</p>
                            <a class="jms-link" href="#">Read more</a>
                        </div>
                        <img src="Images/4.png" />
                    </div>
                    <div class="step" data-color="color-1" data-y="500" data-scale="0.4" data-rotate-x="30">
                        <div class="jms-content">
                            <h3>
                                Holy cannoli!</h3>
                            <p>
                                But as the riper should by time decease, his tender heir might bear his memory</p>
                            <a class="jms-link" href="#">Read more</a>
                        </div>
                        <img src="Images/5.png" />
                    </div>
                </section>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#jms-slideshow').jmslideshow();
                });
            </script>
        </div>
于 2012-09-21T09:26:51.240 に答える