我是编码新手,一直在所见即所得的基础上使用 Dreamweaver。我最近深入研究了 Jquery,并成功在页面上实现了 JQuery SlideshowPro 插件。问题是缩略图在自动缩小时相当像素化,并且没有太大的空间来移动单个缩略图,因为它们在无序列表中。
我想知道是否有一种方法可以手动分配各个 Div 中的每个缩略图(以便于使用)以及要在另一个 Div 中滚动/交换的主图像,同时仅保持主图像过渡上的滑动效果。我不关心缩略图是否滚动,因为每个页面上不太可能有足够的缩略图来保证滚动。实际上,在保持滑动过渡的情况下,脱节的图像交换。
原始代码可以在以下页面找到:gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html尽管我想尽可能避免使用列表。
最佳答案
如果我理解正确的话,这应该很容易通过对插件的简单修改和对 li 图像的轻微更改来完成。
首先,我将数据属性添加到 li 中的图像标记,指定单独的缩略图 url,例如:
<li><img alt="Blerg." src="images/blerg.jpg" data-thumb-src="src="images/blerg_thumb.jpg" /></li>
我添加了一个名为 data-thumb-src 的 html 5 数据属性来包含拇指路径。
然后修改插件中构建幻灯片缩略图部分的部分。我已经下载了该插件,大约第 99 行是这样的:
jQuery(this).find("li").each(function(n) {
jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'> <\/p><\/a><\/li>");
});
将其替换为如下内容:
jQuery(this).find("li").each(function(n) {
jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("data-thumb-src") + "' /><p class='tmbrdr'> <\/p><\/a><\/li>");
});
因此,thumbs src 现在等于主图像中的 data-thumb-src。
如果你真的很喜欢冒险,你可以尝试这样的方法,默认使用普通拇指,然后在需要时使用自定义拇指:
jQuery(this).find("li").each(function(n) {
if( jQuery(this).find("img").attr('data-thumb-src') ){
var thumb_src = jQuery(this).find("img").attr('data-thumb-src');
}else{
var thumb_src = jQuery(this).find("img").attr("src");
}
jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + thumb_src + "' /><p class='tmbrdr'> <\/p><\/a><\/li>");
});
因此,如果拇指 src 存在,则使用它,否则使用普通拇指。
希望这有帮助。
关于jquery - 在 jquery SlideviewerPro 1.5 中使用 Div 代替 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9227878/