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 –