我已经构建了我的第一个 jQuery 移动图像库，但我有一个似乎无法修复的错误。点击图像时，它会弹出全屏并轮播所有图像，我可以滑动图像或点击上一个/下一个箭头。
编辑:自从我写这个问题以来，问题发生了轻微的变化，因此我需要对我的问题和代码进行一些更改。
图像现在可以根据图像在图库中显示的顺序滑动到所有其他图像。我动态地向每个图像添加数据索引，但不知何故，弹出的每个图像的结果是 tabindex="0"。
<body>
<!-- gallery content -->
<div data-role="content" id="pagecontent" class="gallerycontent">
<a href="#imgshow" data-transition="pop" data-rel="dialog">
<img src="../img/someimage.jpg" alt="someimage.jpg"/>
</a>
<!-- plus more unordered images -->
</div> <!--/content-->
</div><!-- /page -->
<!-- full screen image preview -->
<div data-role="dialog" id="imgshow" data-theme="d">
<div data-role="header" data-theme="d">
<div id="dialoghead"></div>
</div>
<div data-role="content" data-theme="d">
<center><div id="dialogcontent"></div></center>
</div>
<div data-role="footer">
<center>
<a href="#" id="prevbtn" data-role="button" data-iconpos="notext" data-icon="arrow-l">Previous</a>
<a href="#" id="nextbtn" data-role="button" data-iconpos="notext" data-icon="arrow-r">Next</a>
</center>
</div>
</div>
</body>
jquery 中的“on-touch”函数和“gonext”函数。
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<a href="#galleryImg"><img src="' + src + '" style="width:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});
function gonext() {
var current = $('a.selectedimg');
if (current.hasClass('last')) {
var next = $('a.first')
} else {
var next = current.next();
}
var src = next.find('img').attr("src");
var alt = next.find('img').attr("alt");
next.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}
有什么想法或提示吗？
最佳答案
我认为问题可能是打开弹出窗口时 selectedimg 类没有被删除。尝试添加这一行
$('.selectedimg').removeClass('selectedimg');
就在该函数的 addClass 行之前，如下所示:
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<a href="#galleryImg"><img src="' + src + '" style="width:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$('.selectedimg').removeClass('selectedimg');
$(this).parent().addClass('selectedimg');
});
关于javascript - 图片库弹出窗口会滑动到所有其他图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8092479/