創建帶有幻燈片的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>