Question

我正在使用jquery cycle plugin进行幻灯片演示。现在一切正常，直到我添加到图像的超链接。我正在尝试添加超链接，如果用户希望添加，所以我有一个设置按钮为我的控制台中的每个图像。如果用户选择一个超链接并点击设置，它应设置。现在正确设置超链接，但是，转换将应用于锚标记而不是 img 标记。当我设置链接时，img标记就像这样包装在锚标记内。

     <a href="www.google.com" id="link" class="link"> 
        <img id="imgBoxRot_1_1" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;" src="http://localhost/images/layout/slideShow/gallImg1.jpg">
     </a>

我像这样动态创建这个锚标签，并将其附加到图像上。

    var newA = document.createElement("a");
    newA.setAttribute("id","lnkImgRotImg_"+iCount+"_"+idT);
    newA.setAttribute("href",document.getElementById(lnk).value);
    newA.setAttribute("class","aTransLink");
    newA.setAttribute("target","_blank");

在设置锚标记之前，插件工作正常并且应用了过渡，但是在向图像添加锚点后，过渡将应用于锚标记而不是图像。如何解决此问题？
谢谢您的时间。

Answer 1

在研究了插件文档后，我了解到，该插件默认应用于应用它的div内的第一个标记。也就是说，如果我们有

<div class="">
     <img></img>
     <img></img>         
</div>

现在，如果我像这样在图像周围包裹一个锚，

<div class="">
     <a href="">
       <img></img>
     </a>

     <img></img>         
</div>

插件在图像标记和锚标记之间混淆，并将转换应用于锚点而不是图像标记（因为它是应用循环插件的div之后的第一个））。因此，我最初将所有图像包装在一个锚标记内（我之前动态添加了锚点）并将插件应用于锚点本身而不是图像标记。

使用jquery循环插件为转换动态添加超链接到图像

1 个答案: