Bild Karussell mit Javascript

Question

Ich muss eine Webseite mit Asp. NET und C# machen.

https://www.zoya.com/content/category/Zoya_Nail_Polish.html

Oben ist die Referenzseite ich für meine Anwendung replizieren müssen. Unten ist der Code, mit dem ich arbeite. (Ich vereinfachte die Komplexität der Suche nach Anzahl der Bilder pro Produkt auf 3 Bilder pro Artikel)

Aber wenn ich auf das Bild klicke, da ich den Endcode zurückrufe, werden die Seiten erfrischend.

Und in der Referenzseite gibt es auf Mausklick die Auswahl passiert und wenn Sie aus den Farbfeldern bewegen wird das ausgewählte Bild hervorgehoben. Was fehlt mir im Code? Wie kann ich es erreichen? Jeder Verweis Link wird auch hilfreich sein. Ich bin neu in der Webentwicklung.

<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> 

Answer 1

Willkommen bei der Front-End-Web-Entwicklung! Dies ist ein großartiger Anwendungsfall für JavaScript. Es gibt mehrere Möglichkeiten, wie Sie dieses Problem lösen können. Es gibt einen schnellen und schmutzigen Weg sowie einen schwer zu programmierenden, aber sehr effizienten Weg. Da Sie JavaScript neu sind, zeige ich Ihnen den schnellen und schmutzigen Weg. Sobald Sie das Konzept von JavaScript-Objekten beherrschen und das DOM manipulieren, werden Sie wahrscheinlich den komplexeren Weg finden (laden Sie Ihre Daten asynchron mit einer JSON-API in Ihrem Backend, speichern Sie dieses Ergebnis in einem JavaScript-Objekt und fügen Sie Event-Listener hinzu Die Seite reagiert auf Ihre Klicks und zeigt das richtige Element an.

Die schnelle und schmutzige Art und Weise: https://codepen.io/krabbypattified/pen/vmpyjK

Das JavaScript basicially sagt „zu jedem der Artikel Kommissionierer einen Klick Zuhörer hinzufügen, das sagt: Wenn Sie auf mich klicken, mit class="item" alle Elemente finden, und wenn seine id passt zu meinem id, zeig es. Sonst versteckst du es. "