0

我有 10 张图像使用 Jquery Cycle 插件显示为幻灯片。一次显示 4 张图像。当用户单击下一个按钮时，将显示接下来的 4 张图像。

每个图像下都有一个下拉菜单。当我在下拉列表中选择一个项目时，我想根据用户在 dropdowm 中选择的项目将图像更改为其他图像。

当用户在下拉列表中选择另一个项目时，我还需要更改图像的“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

这是修改后的工作 javascript 代码，用于更改 Jquery Cycle2 幻灯片中的图像（和一些其他信息）

我添加了 $('.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 回答