我使用带有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>
答案 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。
希望它有所帮助。