Question

我正在制作一个图像切片节目，以便查看一些产品图片。

首先，我将有一些小缩略图，通过点击缩略图，一个较大的图像将显示在另一个div中，默认显示img1的大图像。

然后，如果用户将鼠标悬停在大图像上，光标图像将变为放大镜（zoomin.cur），如果用户点击了大图像，则另一个div（class =“detailview-container-bg）将在隐藏的div中，小缩略图放置在顶部，大图像将显示在下半部分，img1作为默认显示。

到目前为止，我已经想出了第一次点击缩略图以显示更大的图像，我卡在更改光标上，然后再次点击以显示隐藏的div。我为第二次点击构建了一些jQuery，但它不包含错误，我不知道为什么它不能显示div。

        $(function(){
            $('#primaryImageDisplay').on("click",function(){
                $('#productSlide').css({'display':'absolute'});
            });
        })

我已经在JSFiddle中结束了我的代码，请您就此给我一些想法。非常感谢您的时间......

Answer 1

您需要使用适当的值进行显示。（例如阻止http://learnlayout.com/display.html）绝对值来自css属性'position'

如果您调试代码，您会注意到display属性没有使用绝对值更新。

Answer 2

我添加了jquery的源链接。您可以在某些文档功能中使用所有这些操作。我在下面提供了一个示例。

您可以使用show（）/ hide（）或slideToggle（）方法，而不是更改css。它显示更好，跨设备更好。

$(document).ready(function(){
   $('#desktopThumb1').on("click",function(){
   $('#primaryImageDisplay').attr("src","img1.jpg");});

   $('#desktopThumb2').on("click",function(){      
   $('#primaryImageDisplay').attr("src","img2.jpeg");});

   $('#desktopThumb3').on("click",function(){         			         
   $('#primaryImageDisplay').attr("src","img3.jpeg");});

   $('#desktopThumb4').on("click",function(){
   $('#primaryImageDisplay').attr("src","img4.jpeg");});

    $("#primaryImageDisplay").click(function(){
    $("#productSlide").slideToggle();
    });
});

Answer 3

你有必要自己编码吗？听起来您正在寻找您网站上相当高级的画廊。

我可以建议http://lokeshdhakar.com/projects/lightbox2/吗？

它是一个很棒的工具，我在许多网站上都使用过它。

jQuery单击图像并显示div

3 个答案: