0

Jquery Cycle プラグインを使用してスライドショーとして表示される 10 枚の画像があります。一度に 4 つの画像が表示されます。ユーザーが次のボタンをクリックすると、次の 4 つの画像が表示されます。

各画像の下にドロップダウンがあります。ドロップダウンでアイテムを選択すると、ユーザーがドロップダウンで選択したアイテムに応じて、画像を他の画像に変更したいと考えています。

ユーザーがドロップダウンで別の項目を選択したときに、画像の「href」も変更する必要があります。

ユーザーがドロップダウンで項目を選択すると、以下の JavaScript コードを使用して画像やその他の詳細を変更します

Javascript コード

document.getElementById('prodLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;

            document.getElementById('prodImageLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
            document.getElementById('prodImage' + productId).src = "ProductImages/" + productImage;
            document.getElementById('prodImage' + productId).className=document.getElementById('prodImage' + productId).className;
            document.getElementById('prodNameLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
            document.getElementById('productPrice' + productId).innerHTML = productPrice;
            document.getElementById('prodAttribute' + productId).innerHTML = attributeValue;

HTML コード

<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="0"
  data-cycle-slides="&gt; ul" data-cycle-prev="div.pagers a.latest_prev" data-cycle-next=
  "div.pagers a.latest_nxt">
    <ul class="product_show">
      <li class="column">
        <div class="img">
          <div class="hover_over">
            <a class="link" href="#">link</a> <a class="cart" href="#">cart</a>
          </div><a href="#"><img src="images/photos/4c_pic8.jpg" width="218" height="207"
          alt="" /></a>
        </div><a href="#" style="line-height:14px;">Product 1,<br />
        1 Kg Pouch<br /></a> <span class="ourPrice">Our Price: $121.20</span><span class=
        "saveText"><br /></span>

        <div class="dropdowndiv">
          <select name="search_category1" class="default" tabindex="1" style=
          "color: #333333;">
            <option value="">
              Pack size
            </option>

            <option value="amazed">
              Amazed
            </option>


          </select>
        </div><br />
        <br />
        <label for="textfield">Qty</label> <input type="text" name="textfield" id=
        "textfield" class="carttextbox" /> &nbsp; <img src="images/img/but_addtocart.png"
        alt="" width="72" height="16" align="absmiddle" /><br />
        <br />
      </li>
    </ul>
4

1 に答える 1

0

これは、Jquery Cycle2スライドショーの画像（およびその他の情報）を変更する、変更された動作中のJavaScriptコードです。

$（'。cycle-slideshow'）。cycle（'destroy'）;を追加しました。情報を変更する前に

その後、必要な情報をすべて変更します

次に、$（'。cycle-slideshow'）。cycle（）;を呼び出します。スライドショーを再作成するには

$('.cycle-slideshow').cycle('destroy');
            document.getElementById('prodLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;

            document.getElementById('prodImageLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
            document.getElementById('prodImage' + productId).src = "ProductImages/" + productImage;
            document.getElementById('prodImage' + productId).className=document.getElementById('prodImage' + productId).className;
            document.getElementById('prodNameLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
            document.getElementById('productPrice' + productId).innerHTML = productPrice;
            document.getElementById('prodAttribute' + productId).innerHTML = attributeValue;



            $('.cycle-slideshow').cycle();
于 2013-02-04T07:27:28.243 に答える