C# 在内容滑块中从asp.net中继器加载数据？
我正在创建一个内容滑块，其中的信息是从asp.net的repeater控件中的表中获取的。我能够加载数据，但当页面被加载时，它不会给我频繁的加载方式。稍后，这将开始平稳地加载，但首先它将显示C# 在内容滑块中从asp.net中继器加载数据？,c#,jquery,asp.net,C#,Jquery,Asp.net,我正在创建一个内容滑块，其中的信息是从asp.net的repeater控件中的表中获取的。我能够加载数据，但当页面被加载时，它不会给我频繁的加载方式。稍后，这将开始平稳地加载，但首先它将显示数据集中包含的所有值，这些值将一个接一个地显示 语言：lang js $("#slideshowinfo > div:gt(0)").hide(); setInterval(function () { $('#slideshow
数据集中包含的所有值，这些值将一个接一个地显示
语言：lang js
$("#slideshowinfo > div:gt(0)").hide();
setInterval(function () {
$('#slideshowinfo > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshowinfo');
}, 10000);
.aspx页面
<div id="templatemo_banner_content">
<div id="slideshowinfo">
<asp:Repeater ID="rptrNewsUpdates" runat="server">
<ItemTemplate>
<div>
<div class="header_01"><asp:Label ID="lblNewsHeading" runat="server" Text='<% #Eval("OrgName") %>' /></div>
<p><asp:Label Id="lblNewsDescription" runat="server" Text='<%# string.Concat("Last Date: ",Eval("Last Date"),"<br/>","Total Post: ",Eval("TotalPost"),"<br/>","Eligibility: ",Eval("Eligibility"),"<br/>","Description: ",Eval("description")) %>' /></p>
<div class="button_01"><asp:LinkButton ID="linkReadMore" runat="server" PostBackUrl='<%# Eval("url") %>'>Read more</asp:LinkButton></div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
在用户屏幕上呈现的输出
虽然我建议使用现有的jQuery幻灯片放映插件，但我已经修改了您的一些代码，以实现您需要的功能。我还使您可以在同一页上有多个幻灯片放映（但请注意，它们将同时旋转）。我不认为我提供的JavaScript代码修改是生产级的，但它们证明了这一点。请注意，我添加了一点CSS，以确保幻灯片显示窗格的初始可见性与页面加载时的状态相同。您需要修改一点转发器代码，以说明我正在预填充幻灯片放映第一个窗格的class属性（您需要确保class属性在页面上以物理方式填充）
在我提供的内容中，我剥离了您的ASP.Net代码，以使我的示例更清晰
代码如下：
<html>
<head>
<!--these style rules should be moved to a separate file -->
<style type="text/css">
.slideshow .pane {
display: none;
}
.slideshow .pane.active {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<!--
This JS code should be moved to a separate file, and its purpose is simply to be instructive for answering the question
by refining the JS supplied in the question.
This modified code is not production grade.
Assumptions:
-If multiple slide shows on a page, they rotate at the same time
-No slideshow controls.
-->
<script type="text/javascript">
(function($) {
setInterval(function () {
var fadeSpeed = 1000;
$(".slideshow").each(function(){
var $this = $(this);
var $activeSlide = $this.find('div.active');
var $nextSlide = $activeSlide.next();
if($nextSlide.length == 0) {
$nextSlide = $this.find("div.pane:first");
}
$activeSlide.fadeOut(fadeSpeed, function() {
$(this).removeClass("active");
$nextSlide.fadeIn(fadeSpeed).addClass("active");
});
});
}, 10000);
})(jQuery);
</script>
</head>
<body>
<h1>Slide Show Example</h1>
<div id="templatemo_banner_content">
<h2>Slide Show 1</h2>
<div class="slideshow">
<!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
<div class="pane active">
<div class="header_01">Org Name 1</div>
<p>Description 1</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
<div class="pane">
<div class="header_01">Org Name 2</div>
<p>Description 2</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
</div>
<h2>Slide Show 2</h2>
<div class="slideshow">
<!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
<div class="pane active">
<div class="header_01">Org Name 3</div>
<p>Description 3</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
<div class="pane">
<div class="header_01">Org Name 4</div>
<p>Description 4</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
</div>
</div>
</body>
</html>
.幻灯片.窗格{
显示：无；
}
.slideshow.pane.active{
显示：块；
}
（函数（$）{
setInterval（函数（）{
var fadeSpeed=1000；
$（“.slideshow”）.each（函数（）{
var$this=$（this）；
var$activeSlide=$this.find（'div.active'）；
var$nextSlide=$activeSlide.next（）；
如果（$nextSlide.length==0）{
$nextSlide=$this.find（“div.pane:first”）；
}
$activeSlide.fadeOut（fadeSpeed，function（）{
$（此）.removeClass（“活动”）；
$nextSlide.fadeIn（fadeSpeed.addClass（“活动”）；
});
});
}, 10000);
})（jQuery）；
幻灯片放映示例
幻灯片放映1
组织名称1
说明1
组织名称2
说明2
幻灯片放映2
组织名称3
说明3
组织名称4
说明4
您似乎遇到了客户端问题，而不是服务器端问题。aspx很可能正常，而您的CSS（从我看到的可能是js）则不正常。加载页面时，中继器已结束其工作（服务器端），您的CSS和javascript必须注意正确的客户端行为。此外，关于UX，您可能想阅读…我已经尝试了您的代码。您的代码运行良好，感谢您的代码。但我仍然不太清楚如何决定哪个窗格将处于活动状态，而哪个窗格不处于活动状态，因为我需要将标签与数据源绑定，所以我必须e不知道如何将其设置为活动或不活动。
注意我对每个项目的索引所做的检查，确定是否输出“活动”在每个幻灯片放映窗格的类属性中。如果索引为0，则我输出“活动”，否则我将不输出任何内容。为了使示例更清晰，我简化了我的示例。显然，您希望将我的内容集成到我最初提供的解决方案的其余部分中。最后，我假设您使用C#进行实现。如果您使用VB.net，则检查索引的语法将不同。
<html>
<head>
<!--these style rules should be moved to a separate file -->
<style type="text/css">
.slideshow .pane {
display: none;
}
.slideshow .pane.active {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<!--
This JS code should be moved to a separate file, and its purpose is simply to be instructive for answering the question
by refining the JS supplied in the question.
This modified code is not production grade.
Assumptions:
-If multiple slide shows on a page, they rotate at the same time
-No slideshow controls.
-->
<script type="text/javascript">
(function($) {
setInterval(function () {
var fadeSpeed = 1000;
$(".slideshow").each(function(){
var $this = $(this);
var $activeSlide = $this.find('div.active');
var $nextSlide = $activeSlide.next();
if($nextSlide.length == 0) {
$nextSlide = $this.find("div.pane:first");
}
$activeSlide.fadeOut(fadeSpeed, function() {
$(this).removeClass("active");
$nextSlide.fadeIn(fadeSpeed).addClass("active");
});
});
}, 10000);
})(jQuery);
</script>
</head>
<body>
<h1>Slide Show Example</h1>
<div id="templatemo_banner_content">
<h2>Slide Show 1</h2>
<div class="slideshow">
<!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
<div class="pane active">
<div class="header_01">Org Name 1</div>
<p>Description 1</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
<div class="pane">
<div class="header_01">Org Name 2</div>
<p>Description 2</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
</div>
<h2>Slide Show 2</h2>
<div class="slideshow">
<!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
<div class="pane active">
<div class="header_01">Org Name 3</div>
<p>Description 3</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
<div class="pane">
<div class="header_01">Org Name 4</div>
<p>Description 4</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
</div>
</div>
</body>
</html>