如何在listview中使用照片幻灯片显示??我使用jquery....第一行很好，画面一直在循环。但是接下来的几行图片没有变化，我是说它是静态的。我从列"Image1"Image2"Image3"中绑定图像路径。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Restaurant.aspx.vb" Inherits="Restaurant" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="CSS_Styles/Restaurant.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="header">
<asp:LoginStatus ID="LoginStatus1" runat="server"
ForeColor="White"
CssClass="signin" />
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
CssClass="register"
ForeColor="White"
NavigateUrl="~/login.aspx">Register</asp:HyperLink>
<asp:Label ID="Label2" runat="server"
ForeColor="White"
CssClass="welcome">Welcome!Guest.
</asp:Label>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/account.aspx"
ForeColor="White"
CssClass="myaccount"
ToolTip="Click here to go to your account page.">My Account</asp:HyperLink>
<asp:Label ID="Label2" runat="server"
ForeColor="White"
CssClass="welcome">Welcome!<asp:LoginName ID="LoginName2" runat="server" />
</asp:Label>
</LoggedInTemplate>
</asp:LoginView>
<!-- end .header --></div>
<div id="navPos">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<asp:HyperLink ID="Home" runat="server" NavigateUrl="~/homepage_aspx/homepage.aspx">Home</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="Products" runat="server" CssClass="MenuBarItemSubmenu">Products</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Groceries" runat="server">Groceries</asp:HyperLink></li>
<li><asp:HyperLink ID="DepartmentalItems" runat="server">Departmental Items</asp:HyperLink></li>
<li><asp:HyperLink ID="Electronics" runat="server">Electronics</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Mobiles" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=mobiles">Mobiles</asp:HyperLink></li>
<li><asp:HyperLink ID="Laptops" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=computers">Laptops & Computers</asp:HyperLink></li>
<li><asp:HyperLink ID="Accessories" runat="server">Accessories</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="Kitchen" runat="server">Kitchen Items</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink5" runat="server">HyperLink</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink6" runat="server">HyperLink</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="WhyUS" runat="server">Why Us</asp:HyperLink></li>
<li><asp:HyperLink ID="Payment" runat="server">Payment</asp:HyperLink></li>
<li><asp:HyperLink ID="Contact_Us" runat="server" NavigateUrl="ContactUs.aspx">Contact Us</asp:HyperLink></li>
<li><asp:HyperLink ID="AboutUs" runat="server">About Us</asp:HyperLink></li>
</ul>
</div><br /><br />
<div class="content1">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</div>
<br />
<!-- <div id="wrapper">
<div id="ResImage">
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White">
Pay Rs 499 for MAKEOVER PACKAGE:
Revival Facial, Haircut, Hair Wash, Blow Dry,
Upper Lip & Eyebrows Threading worth
Rs 1480 @ LAKME STUDIOS & SALONS, DELHI & NCR
(Valid at 16 outlets)</asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text="Rs.2000" CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text="Rs.6000" CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text="Rs.1400" CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div> -->
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"
DataKeyNames="OfferID" GroupItemCount="2" >
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<td runat="server" style="">
OfferID:
<asp:TextBox ID="OfferIDTextBox" runat="server" Text='<%# Bind("OfferID") %>' />
<br />
RestaurantID:
<asp:TextBox ID="RestaurantIDTextBox" runat="server"
Text='<%# Bind("RestaurantID") %>' />
<br />
Offer:
<asp:TextBox ID="OfferTextBox" runat="server" Text='<%# Bind("Offer") %>' />
<br />
Value:
<asp:TextBox ID="ValueTextBox" runat="server" Text='<%# Bind("Value") %>' />
<br />
Discount:
<asp:TextBox ID="DiscountTextBox" runat="server"
Text='<%# Bind("Discount") %>' />
<br />
YouPay:
<asp:TextBox ID="YouPayTextBox" runat="server" Text='<%# Bind("YouPay") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" />
<br />
</td>
</InsertItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="groupPlaceholderContainer" runat="server" border="0" style="">
<tr ID="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
</td>
</tr>
</table>
</LayoutTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<ItemTemplate>
<td runat="server" style="">
<div id="wrapper">
<div id="ResImage">
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White" Text='<%# Eval("Offer") %>'></asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text='<%# Eval("Value") %>' CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text='<%# Eval("Discount") %>' CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text='<%# Eval("YouPay") %>' CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:Label ID="lblRestaurantName" runat="server" Text='<%# Eval("RestaurantName") %>'></asp:Label><br />
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<td runat="server" style="">
<div id="wrapper">
<div id="ResImage">
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White" Text='<%# Eval("Offer") %>'></asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text='<%# Eval("Value") %>' CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text='<%# Eval("Discount") %>' CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text='<%# Eval("YouPay") %>' CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:Label ID="lblRestaurantName" runat="server" Text='<%# Eval("RestaurantName") %>'></asp:Label><br />
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div>
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">
OfferID:
<asp:Label ID="OfferIDLabel1" runat="server" Text='<%# Eval("OfferID") %>' />
<br />
RestaurantID:
<asp:TextBox ID="RestaurantIDTextBox" runat="server"
Text='<%# Bind("RestaurantID") %>' />
<br />
Offer:
<asp:TextBox ID="OfferTextBox" runat="server" Text='<%# Bind("Offer") %>' />
<br />
Value:
<asp:TextBox ID="ValueTextBox" runat="server" Text='<%# Bind("Value") %>' />
<br />
Discount:
<asp:TextBox ID="DiscountTextBox" runat="server"
Text='<%# Bind("Discount") %>' />
<br />
YouPay:
<asp:TextBox ID="YouPayTextBox" runat="server" Text='<%# Bind("YouPay") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
<br />
</td>
</EditItemTemplate>
<GroupTemplate>
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<SelectedItemTemplate>
<td runat="server" style="">
OfferID:
<asp:Label ID="OfferIDLabel" runat="server" Text='<%# Eval("OfferID") %>' />
<br />
RestaurantID:
<asp:Label ID="RestaurantIDLabel" runat="server"
Text='<%# Eval("RestaurantID") %>' />
<br />
Offer:
<asp:Label ID="OfferLabel" runat="server" Text='<%# Eval("Offer") %>' />
<br />
Value:
<asp:Label ID="ValueLabel" runat="server" Text='<%# Eval("Value") %>' />
<br />
Discount:
<asp:Label ID="DiscountLabel" runat="server" Text='<%# Eval("Discount") %>' />
<br />
YouPay:
<asp:Label ID="YouPayLabel" runat="server" Text='<%# Eval("YouPay") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:databaseConnectionString %>"
SelectCommand="SELECT RestaurantOffers.RestaurantID, RestaurantOffers.Offer, RestaurantOffers.Value, RestaurantOffers.Discount, RestaurantOffers.YouPay, RestaurantName.RestaurantName, RestaurantName.Address, RestaurantName.PhoneNumber, RestaurantName.Image1, RestaurantName.Image2, RestaurantName.Image3, RestaurantOffers.OfferID FROM RestaurantName INNER JOIN RestaurantOffers ON RestaurantName.RestaurantID = RestaurantOffers.RestaurantID ORDER BY NEWID() "
ConflictDetection="CompareAllValues"
DeleteCommand="DELETE FROM [RestaurantOffers] WHERE [OfferID] = @original_OfferID AND [RestaurantID] = @original_RestaurantID AND (([Offer] = @original_Offer) OR ([Offer] IS NULL AND @original_Offer IS NULL)) AND (([Value] = @original_Value) OR ([Value] IS NULL AND @original_Value IS NULL)) AND (([Discount] = @original_Discount) OR ([Discount] IS NULL AND @original_Discount IS NULL)) AND (([YouPay] = @original_YouPay) OR ([YouPay] IS NULL AND @original_YouPay IS NULL))"
InsertCommand="INSERT INTO [RestaurantOffers] ([OfferID], [RestaurantID], [Offer], [Value], [Discount], [YouPay]) VALUES (@OfferID, @RestaurantID, @Offer, @Value, @Discount, @YouPay)"
OldValuesParameterFormatString="original_{0}"
UpdateCommand="UPDATE [RestaurantOffers] SET [RestaurantID] = @RestaurantID, [Offer] = @Offer, [Value] = @Value, [Discount] = @Discount, [YouPay] = @YouPay WHERE [OfferID] = @original_OfferID AND [RestaurantID] = @original_RestaurantID AND (([Offer] = @original_Offer) OR ([Offer] IS NULL AND @original_Offer IS NULL)) AND (([Value] = @original_Value) OR ([Value] IS NULL AND @original_Value IS NULL)) AND (([Discount] = @original_Discount) OR ([Discount] IS NULL AND @original_Discount IS NULL)) AND (([YouPay] = @original_YouPay) OR ([YouPay] IS NULL AND @original_YouPay IS NULL))">
<DeleteParameters>
<asp:Parameter Name="original_OfferID" Type="String" />
<asp:Parameter Name="original_RestaurantID" Type="String" />
<asp:Parameter Name="original_Offer" Type="String" />
<asp:Parameter Name="original_Value" Type="String" />
<asp:Parameter Name="original_Discount" Type="String" />
<asp:Parameter Name="original_YouPay" Type="String" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="RestaurantID" Type="String" />
<asp:Parameter Name="Offer" Type="String" />
<asp:Parameter Name="Value" Type="String" />
<asp:Parameter Name="Discount" Type="String" />
<asp:Parameter Name="YouPay" Type="String" />
<asp:Parameter Name="original_OfferID" Type="String" />
<asp:Parameter Name="original_RestaurantID" Type="String" />
<asp:Parameter Name="original_Offer" Type="String" />
<asp:Parameter Name="original_Value" Type="String" />
<asp:Parameter Name="original_Discount" Type="String" />
<asp:Parameter Name="original_YouPay" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="OfferID" Type="String" />
<asp:Parameter Name="RestaurantID" Type="String" />
<asp:Parameter Name="Offer" Type="String" />
<asp:Parameter Name="Value" Type="String" />
<asp:Parameter Name="Discount" Type="String" />
<asp:Parameter Name="YouPay" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<!-- end .content --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
</script>
</form>
</body>
</html>
jQuery只查找列表视图中标识为slideshow的第一行。来自http://api.jquery.com/id-selector/:
对于id选择器，jQuery使用JavaScript函数document.getElementById()，它是非常高效。
每个id值只能使用一次在文档中。如果不止一个元素被分配了相同的ID，使用该ID的查询只会中第一个匹配的元素DOM。这种行为不应该是然而，依赖的;带有使用相同元素的多个元素ID无效
尝试使用类来选择元素。
我没有尝试这个，但只是想让你在正确的方向…变化:
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
<div class="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
和任何你的jquery有#slideshow到.slideshow的地方