用幻灯片创建JQuery灯箱

Question

你好我正在使用幻灯片创建简单的JQuery LightBox，所以当我点击任何图像时我需要什么，我希望这个图像添加到img标记它是内部Div与类。灯箱，以及单击时。下一步代码将获取当前图像的下一个图像，当单击上一步时代码将获取当前图像的上一个图像：

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

看看这个。

我只在您的js

中添加了几行

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

更新2 ：working fiddle有一些可以帮助您制作幻灯片的想法。

＆＃13;

＆＃13;

$(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);


        });

    });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试此操作，在点击图片时制作一系列图片，然后在.next点击时显示这些图片。

＆＃13;

＆＃13;

$(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++
    });
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;