javascriptを使用した画像カルーセル

Question

私はasp .netとc＃を使ってウェブページを作っています。上記

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

私は自分のアプリケーションのために複製する必要がある参照ページです。以下は、私が作業しているコードです。 （1つの商品につき、画像1枚あたりの画像数を固定することの複雑さを軽減しました）

しかし、私はバックエンドコードを呼び出すので、画像をクリックするとページがきれいになります。

リファレンスページにはマウスクリックで選択が行われ、見本から移動すると選択した画像が強調表示されます。コードには何がないのですか？どうすれば達成できるのですか？参照リンクも参考になります。私はWeb開発の新人です。

<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

フロントエンドWeb開発へようこそ！これはJavaScriptの優れた使用例です。この問題を解決するには複数の方法があります。クイックで汚れた方法だけでなく、コードには難しいが非常に効率的な方法です。 JavaScriptを初めてお使いの方は、すばやく汚れた方法をお伝えします。 JavaScriptオブジェクトのコンセプトをマスターしDOMを操作すると、より複雑な方法（バックエンドのJSON APIを使用してデータを非同期的にロードし、その結果をJavaScriptオブジェクトに格納した後、イベントリスナーを追加してそのページはあなたのクリックに反応し、正しいアイテムを表示します）。

迅速かつ汚い方法：https://codepen.io/krabbypattified/pen/vmpyjK

JavaScriptがbasicially「というアイテムピッカーのそれぞれにクリックリスナーを追加しますと言うこと：あなたが私をクリックするとclass="item"でのすべての要素を見つけて、そのid場合私のidと一致します。それ以外の場合は非表示にしてください。