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

本文关键字：asp net 网站 图像 HTML 何添加 添加 | 更新日期: 2023-09-27 17:50:32

我已经使用html和Jquery创建了一个图像滑块。我正试图把这个图像滑块放到我的主页上的内容占位符，这是用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>

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

你必须有一个母版页的权利，这就是为什么我们使用内容页的权利?你的主页已经定义了头部/正文等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">标签，并把你的jS在一个jS文件和引用它在你的主页，理想情况下，你可以把你的jS代码在内容页，但这不是很好的做法，它只是更容易创建jS文件，并在你的主页引用…祝你好运!

首先，你的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

在母版页中添加链接到jquery，然后为标题添加内容占位符。

使用最近创建的母版页添加新页面。在内容占位符中添加滑动条功能。从主体中删除onload，并在页面中使用.load()使用jquery添加调用。

在母版中添加第二个占位符，以便在正文中添加内容，并为滑块添加html。

希望能有所帮助。

相关文章：