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

下面的代码对我有用。请检查 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 回答
0

请检查以下内容：

  1. 包含脚本的顺序。
  2. 从浏览器保存 html 页面，并将代码与现场示例进行比较。逐行。
  3. 检查包含 img urls 和 text 的变量，可能你有拼写错误
于 2012-09-21T09:06:06.570 回答