使用幻灯片创建 JQuery 灯箱

Question

你好我正在使用幻灯片创建简单的 JQuery 灯箱，所以当我单击任何图像时，我需要什么，我希望将此图像添加到 img 标记中，它位于 Div 的 Class 中。灯箱，当点击 .next 时，代码将获取当前图像的下一个图像，当单击上一个时，代码将获取当前图像的上一个图像：

第二：我想在滑块之间添加淡入淡出效果。
注意：我想更多地了解 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>

Answer 2

看看这个。

我只在您的js 中添加了几行

更新：添加上一个按钮和淡入淡出效果。

更新 2：working fiddle 提供一些可以帮助您开发幻灯片的想法。

$(document).ready(function () {

        var first_img = $(".image img:first");

        var last_img = $(".image img:last");

        $(".lightbox img").attr("src", first_img.attr('src'));

        $(".image img").click(function (e) {

            $(".lightbox img").attr("src", $(this).attr("src"));
        });


      $(".lightbox .next").click(function (e) {

            var img = $('.image img[src="' + $(this).parent().find('img').attr('src') + '"]').parent().next('div').find('img');

            if (img.length === 0) { img = first_img; }

            $(".lightbox img").attr("src", img.attr('src')).stop(true,true).hide().fadeIn(200);


        });

        $(".lightbox .prev").click(function (e) {

            var img = $('.image img[src="' + $(this).parent().find('img').attr('src') + '"]').parent().prev('div').find('img');

            if (img.length === 0) { img = last_img; }

            $(".lightbox img").attr("src", img.attr('src')).stop(true, true).hide().fadeIn(200);


        });

    });

.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;
    background-color: rgba(0, 234, 119, 0.80);
}
.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;
}
.lightbox .prev{
    position:absolute;
    top:0;
    left: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 class="prev">
        <i class="fa fa-chevron-left"></i>
    </div>
</div>