javascript - 使用幻灯片创建 JQuery 灯箱

Question

你好 我致力于使用幻灯片创建简单的 JQuery 灯箱，那么当我单击任何图像时，我需要什么，我希望将此图像添加到 img 标签中，使其位于带有类的 Div 中。 lightbox，当点击 .next 时，代码将获取当前图像的下一张图像，当点击上一张时，代码将获取当前图像的上一张图像:

第二:我想在 slider 之间添加淡入淡出效果。
注意:我想更多地了解 JavaScript 和 JQuery，因此请不要推荐任何插件。

$(document).ready(function () {
    $(".image img").click(function (e) {
        e.preventDefault();
        $(".lightbox img").attr("src", $(this).attr("src"));
    });
    $(".lightbox .next").click(function (e) {
        e.preventDefault();
    });
})

.image{
    width:200px;
    float:left;
}
.image img{
    width:100%;
    height:auto;
}
.clearfix{
    clear:both;
}
.lightbox{
    width:300px;
    height:300px;
    position:relative;
    margin:50px auto;
    border:2px solid #0094ff;
    text-align:center;
    line-height:300px;
    font-size:40px;
}
.lightbox img{
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    left:0;
}
.lightbox div {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:50px;
    background-color:rgba(0, 234, 119, 0.80);
    cursor:pointer;
} 
.lightbox .left{
    right:0;
    left:0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" />
</div>
<div class="clearfix"></div>
<div class="lightbox">
    <img src=""/>
    <div class="next">
        <i class="fa fa-chevron-right"></i>
    </div>
  <div class="left">
    <i class="fa fa-chevron-left"></i>
</div>

</div>

注意:请全屏运行代码片段

Answer 1

试试这个，在点击它的同时制作一个图像数组，然后在 .next 点击时显示它们。

$(document).ready(function () {
    var images = [];
    var j;
    $(".image img").click(function (e) {
        e.preventDefault();
        j = $(this).attr("src");
        $(".lightbox img").attr("src", j);
        images.push(j);
    });
    var i = 0;
    $(".lightbox .next").click(function (e) {
        $(".lightbox img").attr("src", images[i]);
        i++
    });
})

.image{
    width:200px;
    float:left;
}
.image img{
    width:100%;
    height:auto;
}
.clearfix{
    clear:both;
}
.lightbox{
    width:300px;
    height:300px;
    position:relative;
    margin:50px auto;
    border:2px solid #0094ff;
    text-align:center;
    line-height:300px;
    font-size:40px;
}
.lightbox img{
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    left:0;
}
.lightbox .next{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:50px;
    background-color:rgba(0, 234, 119, 0.80);
    cursor:pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/14870503793991.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037950512.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037968313.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037982314.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705037997515.jpg" alt="" />
</div>
<div class="image">
    <img src="http://store6.up-00.com/2017-02/148705038013416.jpg" alt="" />
</div>
<div class="clearfix"></div>
<div class="lightbox">
    <img src=""/>
    <div class="next">
        <i class="fa fa-chevron-right"></i>
    </div>
</div>