優化/做出更好的jQuery代碼的圖像滑塊

Question

我已經開發了這個基本的圖像滑塊項目：

$(document).ready(function() { 
 
    $('.lightbox').click(function() { 
 
    $('.backdrop, .box').animate({ 
 
     'opacity': '.50' 
 
    }, 300, 'linear'); 
 
    $('.box').animate({ 
 
     'opacity': '1.00' 
 
    }, 300, 'linear'); 
 
    $('.backdrop, .box').css('display', 'block'); 
 
    }); 
 

 
    $('.close').click(function() { 
 
    close_box(); 
 
    }); 
 

 
    $('.backdrop').click(function() { 
 
    close_box(); 
 
    }); 
 

 
\t //SlideShow 
 
\t $('.next').click(function(){ 
 
\t \t clickNext(); 
 
\t }); 
 
\t $('.prev').click(function(){ 
 
\t \t clickPrev(); 
 
\t }); 
 

 
}); 
 

 
function close_box() { 
 
    $('.backdrop, .box').animate({ 
 
    'opacity': '0' 
 
    }, 300, 'linear', function() { 
 
    $('.backdrop, .box').css('display', 'none'); 
 
    }); 
 
} 
 

 
//PREVIOUS 
 
function clickPrev() { 
 
\t $('.img_1').css('display', 'block'); 
 
\t //Move to the prev Image 
 
\t $('.img_2').css('display', 'none'); 
 
} 
 

 
//NEXT 
 
function clickNext() { 
 
\t $('.img_1').css('display', 'none'); 
 
\t //Move to the next Image 
 
\t $('.img_2').css('display', 'block'); 
 
}

body { 
 
    font-family: Helvetica, Arial; 
 
} 
 

 
.backdrop { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #000; 
 
    opacity: .0; 
 
    filter: alpha(opacity=0); 
 
    z-index: 50; 
 
    display: none; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    left: 50%; 
 
    background: white; 
 
    text-align: left; 
 
    z-index: 51; 
 
    padding: 0; 
 
\t margin: 0; 
 
    display: none; 
 
\t -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -moz-box-shadow: 0px 0px 5px #444444; 
 
    -webkit-box-shadow: 0px 0px 5px #444444; 
 
    box-shadow: 0px 0px 5px #444444; 
 
    border: 10px solid #fff; 
 
\t width: 40%; 
 
} 
 

 
@media (min-width: 320px) and (max-width: 900px) { 
 
\t .box {width: 98%;} 
 
} 
 

 
@media (min-width: 901px) and (max-width: 1200px) { 
 
\t .box {width: 60%;} 
 
} 
 

 
@media (min-width: 1201px) { 
 
\t .box {width: 48%;} 
 
} 
 

 
.box img { 
 
\t width: 100%; 
 
} 
 

 
.box img:nth-child(2) { 
 
\t display: none; 
 
} 
 

 
.caption { 
 
\t padding-top: 10px; 
 
    font-size: 15px; 
 
} 
 

 
.prev, .next { 
 
\t float: right; 
 
\t padding: 5px; 
 
\t font-size: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
<h1>Welcome Within</h1> 
 
\t <a href="#" class="lightbox">Open Lightbox</a> 
 
\t <div class="backdrop"></div> 
 
\t <div class="box"> 
 
\t <img class="img_1" src="http://urbanphenomena.net/imgs/wesal/wesal1.jpg" /> 
 
\t \t <img class="img_2" src="http://urbanphenomena.net/imgs/wesal/wesal2.jpg" /> 
 

 
\t <div class="caption"> 
 
\t \t <a href="#" class="next">NEXT</a> 
 
\t \t \t <a href="#" class="prev">PREVIOUS</a> 
 
\t \t \t <p>This thing is called 'Caption'. Let me tell you:</p> 
 
     <hr /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t \t \t \t Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
\t \t \t \t Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
\t \t \t \t Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t </div> 
 
</div>

見我做什麼呢？ 類是display:none;而當用戶點擊下一步或上一個jQuery中就可以將CSS改變display: block;

現在，這是一個良好的開端我猜想，但如果我將添加更多的圖片是什麼？ 這將是有趣的，如果我繼續這樣做display none事情到每個nth:child()，對不對？

我正在考慮讓click to change image成爲一個函數，但我無法弄清楚如何做到這一點，所以我不必每次都添加css類！

Answer 1

你可以讓你的jQuery更通用：

var imgVisible = $('.box > img:visible'); 
//SlideShow 
$('.next').click(function(){ 
    $(imgVisible).css('display', 'none'); 
    $(imgVisible).next().css('display', 'block'); 
}); 
$('.prev').click(function(){ 
    $(imgVisible).css('display', 'none'); 
    $(imgVisible).prev().css('display', 'block'); 
});