Question

Code （请注意，如果没有引用图像，结果将无法正确显示）

我是大学的学生，有一些编程经验。我的老板要我制作一个类似于可以看到的幻灯片here.除了基本的W3学校教程之外我对Javascript或jQuery一无所知所以我决定从外部来源获取代码来修改我自己的目的。

此代码构建出现了两个问题。我的第一个问题是两者中的问题比较简单。

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(<img src="img\rssSmall.jpg" />)"></a>

我正在尝试在幻灯片的底部制作小缩略图，以便在幻灯片之间切换。不幸的是，由于嵌套引号，IDE（Aptana，如果它重要）将编码引号解释为

"$('.slideshow').blinds_change(<img src="

和

" />)"

因此它显示“/＆gt;）”而不是正确的缩略图。

我的第二个问题是将每个幻灯片变为链接。由于某种原因，简单的标签不起作用。

<li><a href="http:\\google.com"><img class="slide" src="img\sakaiupgrade.png" alt="Whats new in Sakai?" /></a></li>

我认为这更多地与Javascript / jQuery方面有关，这在我的脑海中已经超出了我的想象。

提前感谢你们给我的任何帮助！

如果您想自己投射一些图像，幻灯片的大小为w500 h350，标签的大小为w77 h54。或者我可以尝试上传所有相关图片。

Answer 1

到第一期：

您可以使用斜杠来转义引号，例如

"$('.slideshow').blinds_change('<img src=\"/some/path\" />')"

至第二期：

您的链接不正确。它应该是：

href="http://google.com"

Answer 2

您需要将其添加到页面的顶部，<script标记下方。

这将从百叶窗过程开始。

<script language="javascript">

    $(document).ready(function()
    {
    $(".slidehsow").blinds();
    });


</script>

接下来，您会找到<a个链接，但是如果您想要添加缩略图，请将其更改为：

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)"><img src="img/somethingThumbnail.jpg" alt="Link to Slide 1" /></a>

就像他们一样，工作是胡萝卜！

因此，您的主要图片包含在<li>元素中，缩略图位于<a元素中。

编辑问题2

通过查看jQuery百叶窗代码，没有办法将<li>项目转换为正确的链接 - 因为图像被更改为新div的背景图像。

您需要编辑jquery.blinds-0.9.js文件，如下所示：

第49行变为：

blinds_images[blinds_images.length] = { 'title': e.alt, 'src': e.src, 'href': $(this).parent().attr("href") }

这将父元素（图像）href属性添加到数组中。

第89行变为：

,'cursor': 'pointer'

这意味着当鼠标悬停在图像上时，鼠标将成为链接指针

将此行插入第91行：

tile.click(function (e) { window.location = blinds_images[0]['href']; });

此设置是第一个图块的默认链接。

最后，第115行（或插入行之前的114）变为：

$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat').click(function (e) { window.location = config.images[config.img_index]['href']; });

再一次，这会选择href，并在点击特定幻灯片时将浏览器定向到那里。

通过这些更改，您通常的<li><a href="somelink.htm"><img src="someIMage.png" /></a></li>代码将按预期工作。

CAVEAT 我没有使用 <a元素测试此，因此没有链接的列表项将需要空的（可能）或jQuery代码需要进一步调整以捕获任何null值。

在jQuery中链接和图像的问题

2 个答案: