0
我必须制作一个使用asp.net和c＃的网页。使用javascript的图像传送带
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>
感谢您的好评，我已经对mouseover上的carousal图片做了一些编码。你能告诉我怎样才能修复mouseout上的点击项目并在鼠标上再次滚动？ – Developer
@Developer所以我很想捣乱你的代码，但是我需要你编写一个CodePen或者其他的东西（比如我）（基本上删除你的C＃代码）。但是，如果我理解正确，你需要一个鼠标悬停来“偷看”物品并点击以永久显示物品（如在ZOYA.com上）？如果是这样，我可以用我自己的代码来做到这一点 –
@Developer我已经更新了codepen！ https://codepen.io/krabbypattified/pen/vmpyjK –