创建带有幻灯片的JQuery灯箱

Question

你好我正在创建简单的JQuery LightBox幻灯片，所以我需要什么当我点击任何图像时，我希望这个图像添加到img标签它是Div的内部类.lightbox，而当点击。接下来代码将获取的当前图像下一张图片而当点击前面的代码将获取的当前图像之前的图像：

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

UPDATE：添加以前按钮和淡入淡出效果。

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

Answer 2

试试这个，使图像的阵列，同时在点击它，然后将它们显示在.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>