在悬停缩略图上使用jquery更改主图像

时间:2013-08-06 06:59:12

标签: jquery hover gallery thumbnails onchange

我正在寻找类似this的内容,如果我将鼠标悬停在缩略图上,主图像就会发生变化。但是有一个问题,因为我还需要像fancybox这样的东西 - 点击主图像或缩略图会显示大图像。此外,在一行中应该有缩略图的照片,如果有超过例如四个缩略图,那么移动图库将有左/右箭头。有没有包含我所有要求的解决方案?

2 个答案:

答案 0 :(得分:7)

试试这个:

var mainImage = $("#mainImage");
$(".img-container img").hover(function(){
  var src = $(this).attr("src");
  $("#mainImage").attr("src",src);
});

mainImage.on("click",function(){
   $(this).css("transform","scale(2)");
});

在这里工作小提琴:http://jsfiddle.net/RyDqX/

我希望它有所帮助。

答案 1 :(得分:0)

这是一系列解决方案,检查并找到合适的解决方案 http://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/