Question

预览应该如何：https://www.youtube.com/embed/8qKRf0cg3Co

与视频一样，我必须点击img以获取其下img的大视图。

到目前为止，这是我的代码：

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>

<body>
<center>

<div id="wrapper">

<div id="nav">
    <div id="overbalk"></div>
    <img src="images/foto_01.png" align="top" class="foto" />
    <img src="images/foto_02.png" align="top" class="foto" />
    <img src="images/foto_03.png" align="top" class="foto" />
    <img src="images/foto_04.png" align="top" class="foto" />
</div>

<div id="content">
    <img src="images/foto_01.png" align="top" class="slide_foto" />
</div>

</div>

</center>
</body>
</html>

CSS：

<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top:  -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>

JS：

$(document).ready(function (){
    $('.foto').mouseenter(function () {
        $(this).animate({marginTop: '+=50'}, 200);
    });
    $('.foto').mouseleave(function (){
        $(this).animate({marginTop: '-=50'}, 200);
    });
    $('.foto').click(function () {
        $(this).next('#content').show();
    });
});

我也试过这个：

$('.foto').on('click', function () {
    $('#content').html(nieuwe_foto).show();
    var nieuwe_foto = $(this).attr('src');
    $('.slide_foto').attr('src', nieuwe_foto);
}

这些都不起作用，并且有点卡住，图像没有显示在小图像下面。

Answer 1

您需要进行2次更改：

从<style>

中删除此样式类

.slide_foto {
    margin-left:-3200px;
}

在onclick处理程序中进行此更改

$('.foto').on('click', function () {
    var nieuwe_foto = $(this).prop('src');
    $('.slide_foto').prop('src', nieuwe_foto);
});

我用样本图像https://jsfiddle.net/sachin_puthran/c2qgjpj1/

以下不做任何事情，因为nieuwe_foto未定义，直到下一行，div#content已经显示.show()也没有做任何事情。

$('#content').html(nieuwe_foto).show();

Answer 2

.show()不是您想要的。它基本上会“取消隐藏”一个元素。因此，如果元素具有display: none样式，则.show()将恢复初始显示样式。请参阅the docs。

尽管你的第二次尝试更接近了。您要在$('.foto').click函数中执行的操作是将.slide_foto元素的src设置为当前this对象的src中的内容。

Jquery：点击显示IMG

2 个答案: