用幻灯片创建JQuery灯箱

Hello I Work On Create Simple JQuery LightBox With Slide, So What is I Need That When I Click on Any Image, I Want This Image To Added to img Tag That it's Inside Div With Class .lightbox, And When Click On .next The Code Will Get The Next Image of The Current Image And When Click on previous The Code Will Get The Previous Image of The Current Image:

Second: I'd Like To Add Fade Effect Between Sliders.
Note: I'd Like To Understand More And More About JavaScript And JQuery So Please Not Suggest Any Plugin.

你好我工作在创建简单的JQuery LightBox幻灯片,我需要的是什么,当我点击任何形象,我想这张图片添加到img标记的内部类.lightbox 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>

Note: Please Run Code Snippet In Full screen

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

2 个解决方案

#1

Try this, make an array of images while clicking on it, and then show them on .next click.

试试这个，在点击时创建一个图像数组，然后在.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>

#2

Take a look at this.

看看这个。

I only added a few lines to your js

我只给你的js加了几行

UPDATE: added previous button and fade effect.

更新:添加先前的按钮和渐变效果。

UPDATE 2: working fiddle with some ideas that can help you to develop your slideshow.

更新2:修改一些可以帮助你开发幻灯片的想法。

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