如何将HTML图像滑块添加到asp.net c#网站

时间:2014-03-15 01:10:23

标签: c# asp.net contentplaceholder

我使用带有Jquery的html创建了一个Image Slider。我正在尝试将此图像滑块放入我的主页上的contentplaceholder,该主页使用c#运行主页模板。它不起作用。

图片滑块HTML:

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>jQuery Slider</title>

 <style type="text/css">
 .slider {
   width:1025px;
   height:500px;
   overflow:hidden;
   margin:30px auto;
 }
 .slider img{
   width:1025px;
   height:500px;
   display:none;
   margin:30px auto;
 }

  </style>
   <script type="text/javascript"
   src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-   ui.min.js"></script>
   <script type="text/javascript">

    function Slider() {
        $(".slider #1").fadeIn("fade, 500");
        $(".slider #1").delay(5500).hide("slide", { direction: 'left' }, 500);

        var sc = $(".slider img").size();
        var count = 2;

        setInterval(function (){
            $(".slider #" + count).show("slide",{direction:'right'}, 500);
            $(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);

            if(count == sc){
                count = 1;
            }else{
                count = count + 1;
              }
            }, 6500);
        }


  </script>
  </head>
  <body onload="Slider();">

  <div class="slider">
    <img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
    <img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
  </div>
  </body>
  </html>

内容占位符我正在尝试将HTML放入:

<asp:Content ID="Content3" runat="server" contentplaceholderid="ContentPlaceHolder1">
</asp:Content>

3 个答案:

答案 0 :(得分:1)

您必须拥有一个主页,这就是您使用内容页面的原因吗?您的主页已经定义了HTML标签的头部/主体等,所以你需要将div放在内容占位符

 <div class="slider" onload="Slider()";>
 <img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
 <img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
 </div>

和你的onload函数调用,你需要移动你的src =“// ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js”&gt;     标记到母版页并将您的jS放在JS文件中并理想地在您的母版页中引用它,您可以将您的JS代码放在内容页面中但这不是一个好习惯,它更容易在参考中创建js文件和plonk在你的主页上...祝你好运!

答案 1 :(得分:1)

首先,你的CDN是错的。它应该是:

<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

注意你错过了https部分。然后,该单个页面的HTML应该可以单独使用。

然后使用正确的主标记和内容标记关注其他建议,或者回过头来提问:D

答案 2 :(得分:0)

在母版页中添加指向jquery的链接,然后为头部添加内容占位符。

使用最近创建的母版页添加新页面。在该内容占位符中添加功能滑块。从正文中删除onload,并在页面中使用.load()使用jquery添加调用。

在主人中添加第二个占位符以在正文中添加内容并为滑块添加html。

希望它有所帮助。