我必须使用 asp .net 和 c# 制作一个网页。
https://www.zoya.com/content/category/Zoya_Nail_Polish.html
上面是我需要为我的应用程序复制的引用页面。下面是我正在使用的代码。 (我将查找每个产品图像数量的复杂性简化为每个项目固定 3 个图像)
但是，当我单击图像时，因为我正在调用后端代码，页面就会刷新。
在引用页面中，单击鼠标即可进行选择，如果您移出样本，则所选图像将突出显示。我在代码中缺少什么？我怎样才能实现它。任何引用链接也会有所帮助。我是网络开发新手。
<div class="container">
<div class="col-md-12 ">
<div class="col-md-4 single_left pull-left left">
<div class="flexslider">
<ul>
<li>
<img id="image3" class="etalage_thumb_image" src="images/4.jpg" />
<img id="image" class="etalage_source_image" src="images/4.jpg" />
</li>
<li>
<img id="image1" class="etalage_thumb_image" src="images/4.jpg" />
<img id="image4" class="etalage_source_image" src="images/5.jpg" />
</li>
<li>
<img id="image2" class="etalage_thumb_image" src="images/4.jpg" />
<img id="image5" class="etalage_source_image" src="images/6.jpg" />
</li>
</ul>
</div>
<script defer src="assets/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<div class="caption ">
<div id="name"><small><strong>Zoya 1 </strong></small></div>
<div id="price"><strong>Zoya123</strong></div>
</div>
<div>
<asp:Label ID="Label1" runat="server" Text="SELECTED" Style="color: red; font: bold"></asp:Label>
<asp:Image ID="imgselected" runat="server" src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' Width="300" Height="250" alt="" />
<br />
<strong>
<asp:Label ID="ItemCode" runat="server" Text=""></asp:Label>
</strong>
<br />
<strong>
<asp:Label ID="lblPrice" runat="server" Text=""></asp:Label>
</strong>
<br />
<p>
<small><strong>
<asp:Label ID="lblDesc" runat="server" Text=""></asp:Label>
</strong></small>
<br />
<asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
<small>
<asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
</small>
<br />
</p>
<asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>
<asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
</div>
</div>
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<div>
<img id="img" src="assets/products/1_ZP244.jpg" />
</div>
<div class="clearfix"></div>
<div style="align-content: center">
<strong>CLICK THE IMAGE TO SELECT </strong>
</div>
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="14"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" class="data" OnSelectedIndexChanged="OnSelectedIndexChanged">
<EmptyDataTemplate>
No Images found.
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<div class="data" data-image='<%#"assets/products/"+Eval("ImageUrl").ToString() %>'
data-name='<%# Eval("Description") %>' data-price='<%# Eval("Price") %>'
data-image1='<%#"assets/products/1_"+Eval("ImageUrl").ToString() %>'
data-image2='<%#"assets/products/2_"+Eval("ImageUrl").ToString() %>'>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="myButton"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="width: 50px; height: 50px" alt="Change" onclick='' /></asp:LinkButton>
</div>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="clearfix"></div>
<!---->
</div>
<script>
$(".data").mouseover(function () {
var image = $(this).attr('data-image');
var image1 = $(this).attr('data-image1');
var image2 = $(this).attr('data-image2');
var image3 = $(this).attr('data-image');
var image4 = $(this).attr('data-image1');
var image5 = $(this).attr('data-image2');
var name = $(this).attr('data-name');
var price = $(this).attr('data-price');
$(".left").find('#image').attr('src', image);
$(".left").find('#image1').attr('src', image1);
$(".left").find('#image2').attr('src', image2);
$(".left").find('#image3').attr('src', image3);
$(".left").find('#image4').attr('src', image4);
$(".left").find('#image5').attr('src', image5);
$(".left").find('#name').text(name);
$(".left").find('#price').text(price);
})
</script>
<div class="clearfix"></div>
</div>
最佳答案
欢迎来到前端 Web 开发!这是 JavaScript 的一个很好的用例。有多种方法可以解决这个问题。有一种快速但肮脏的方法，也有一种难以编码但非常有效的方法。由于您是 JavaScript 新手，我将向您展示快速但肮脏的方法。一旦掌握了 JavaScript 对象的概念并操作 DOM，您可能会找出更复杂的方法(使用后端的 JSON API 异步加载数据，将结果存储在 JavaScript 对象中，然后添加事件监听器来使该页面响应您的点击并显示正确的项目)。
快速而肮脏的方法:https://codepen.io/krabbypattified/pen/vmpyjK
该 JavaScript 基本上表示“向每个项目选择器添加一个点击监听器，该监听器表示:当您点击我时，查找带有 class="item" 的所有元素，并且如果其 id 与我的 id 匹配，显示它。否则，隐藏它。”
关于javascript - 使用 javascript 的图像轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43832680/