Question

我有10张图像使用Jquery Cycle插件显示为幻灯片显示。一次显示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>

Answer 1

以下是在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();

使用Javascript在幻灯片放映（Jquery Cycle）中用幻灯片中的另一个图像替换幻灯片图像

1 个答案: