我正在设置可以通过屏幕箭头点击的图像。 目前我通过循环和数组显示所有图像。 我已经能够设置它，以便当您将鼠标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