我正在设置可以通过屏幕箭头点击的图像。 目前我通过循环和数组显示所有图像。 我已经能够设置它,以便当您将鼠标hover在小图像预览上时,主图像将更改为该图像。 阿卡,你可以将它们hover在它们上面以查看更大的版本。
我的数组是在mongo模型中: Listings.currentimages
我下面的当前代码用于获取一个小图像,以便在hover时接管特色图像。 如何更改我的代码以使用屏幕左/右箭头?
> <% for(var i = 0; i
">
hoverfunction:
$('.small').hover(function() { $('.small').removeClass('selectedImage') var src = $(this).attr('src'); $(this).addClass('selectedImage') $('#mainPicture').attr('src', src); });
假设您有两个图标(next / prev),您可以定义以下两个事件处理程序,以便向右或向左移动:
$('#nextArrow').on('click', function(e) { var anchestor = $('.small.selectedImage').closest('.smallerImages'); var nextImg = $('#allimages .smallerImages:first .small'); if (anchestor.next().length != 0) { nextImg = anchestor.next().find('.small'); } $('.small').removeClass('selectedImage'); var src = nextImg.attr('src'); nextImg.addClass('selectedImage'); $('#mainPicture').attr('src', src); }) $('#prevtArrow').on('click', function(e) { var anchestor = $('.small.selectedImage').closest('.smallerImages'); var nextImg = $('#allimages .smallerImages:last .small'); if (anchestor.prev().length != 0) { nextImg = anchestor.prev().find('.small'); } $('.small').removeClass('selectedImage'); var src = nextImg.attr('src'); nextImg.addClass('selectedImage'); $('#mainPicture').attr('src', src); })
我创建了一些代码来做你想做的事。 基本上,您必须保留当前显示图像的索引,然后使用该索引显示正确的图像。
我创建了一个虚构的扩展图像列表。 你可以丢弃它。
需要了解更多jQuery教程分享在Array onClick中显示下一个图像,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享在Array onClick中显示下一个图像相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/982264.html