2017-07-18 73 views
0

我有彈出的普通jQuery畫廊。並停留在製作循環。我認爲在到達最後的形象後必須回到第一個,但是怎麼樣? https://codepen.io/Slava91/pen/pwBrLP?editors=0000如何在庫jQuery中進行循環?

$(document).ready(function(){ 

    $("#thumbnail li a").click(function(){ 
    $('#thumbnail a').removeClass('active'); 
    $(this).addClass(' active'); 

     $("#large img").attr({ 
     "src": $(this).attr("href"), 
     "title": $("> img", this).attr("title")}); 

    $("#large h2").html($("> img", this).attr("title")); 
     return false; 
    }); 

    //close button// 
    $('.close').click(function(){ 
     $('.modal-window').css('display', 'none'); 
    }) 

    //popup window after click on big img// 
    $('#large img').click(function(){ 

     $('.modal-window').css('display', 'block'); 
     $('.modal-content').attr({ 
     'src':$(this).attr('src')}) 
    }) 

    //navigation in popup window// 
    $('.next').on('click', (function(){ 

     var currentActive = $('a.active').removeClass('active') 
          .parent().next().find('a').addClass('active'); 

    $('.modal-content').attr('src', currentActive.attr('href')); 
    })) 

    $('.prev').click(function(){ 
    var currentActive2 = $('a.active').removeClass('active') 
          .parent().prev().find('a').addClass('active'); 

    $('.modal-content').attr('src', currentActive2.attr('href')); 
    }) 

}); 

回答

1

我認爲達到後最後一個圖像必須回第一,但如何?

此問題適用於下一個和上一個(轉到第一個或最後一個...)。

解決這種情況的方法是測試如果你是最後一個/第一個幻燈片,這樣你就可以根據按鈕(下一個/上)第一/最後:

對於您可能會看到的細節next和prev點擊處理程序下面的代碼片段:

$("#thumbnail li a").click(function() { 
 
    $('#thumbnail a').removeClass('active'); 
 
    $(this).addClass(' active'); 
 

 
    $("#large img").attr({ 
 
     "src": $(this).attr("href"), 
 
     "title": $("> img", this).attr("title") 
 
    }); 
 

 
    $("#large h2").html($("> img", this).attr("title")); 
 
    return false; 
 
}); 
 

 
//close button// 
 
$('.close').click(function() { 
 
    $('.modal-window').css('display', 'none'); 
 
}) 
 

 
//popup window after click on big img// 
 
$('#large img').click(function() { 
 

 
    $('.modal-window').css('display', 'block'); 
 
    $('.modal-content').attr({ 
 
     'src': $(this).attr('src') 
 
    }) 
 
}) 
 

 
//navigation in popup window// 
 
$('.next').on('click', (function() { 
 
    var currentActive = this; 
 
    if ($('a.active').parent().next().length == 0) { 
 
     // if last get first... 
 
     currentActive = $('a.active').removeClass('active') 
 
       .closest('ul').find('li:first a').addClass('active'); 
 
    } else { 
 
     currentActive = $('a.active').removeClass('active') 
 
       .parent().next().find('a').addClass('active'); 
 
    } 
 

 
    $('.modal-content').attr('src', currentActive.attr('href')); 
 
})) 
 

 
$('.prev').click(function() { 
 
    var currentActive = this; 
 
    if ($('a.active').parent().prev().length == 0) { 
 
     // if first get last... 
 
     currentActive = $('a.active').removeClass('active') 
 
       .closest('ul').find('li:last a').addClass('active'); 
 
    } else { 
 
     currentActive = $('a.active').removeClass('active') 
 
       .parent().prev().find('a').addClass('active'); 
 
    } 
 

 
    $('.modal-content').attr('src', currentActive.attr('href')); 
 
})
img { 
 
    width: 100%; 
 
} 
 

 
#large { 
 
    width: 600px; 
 
    /* height: 350px; */ 
 
    float: left; 
 
    margin-top: 50px; 
 
    margin-left: 50px; 
 
} 
 

 
#large img { 
 
    width: 600px; 
 
    /* height: 263px; */ 
 
    border: 5px solid #223348; 
 
} 
 

 
#thumbnail { 
 
    width: 210px; 
 
    height: 256px; 
 
    overflow: auto; 
 
    float: left; 
 
    list-style: none; 
 
    margin-top: 50px; 
 
    margin-left: 16px; 
 
    margin-left: 8px; 
 
    padding: 5px; 
 
    border: 3px solid #223348; 
 
    background: #fff; 
 
} 
 

 
#thumbnail li { 
 
    float: left; 
 
    width: 79px; 
 
    margin: 8px; 
 
    margin: 5px; 
 
} 
 

 
#thumbnail a { 
 
    display: block; 
 
    width: 75px; 
 
    height: 56px; 
 
    padding: 1px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
#thumbnail a:hover { 
 
    border-color: #405061; 
 
} 
 

 
.modal-window { 
 
    padding-top: 50px; 
 
    display: none; 
 
    z-index: 1; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgba(0, 0, 0, .9); 
 

 
} 
 

 
.modal-content { 
 
    max-width: 50%; 
 
    margin: auto; 
 

 
    display: block; 
 
} 
 

 
.caption { 
 
    text-align: center; 
 
    max-width: 100%; 
 
    margin: auto; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
    display: block; 
 
} 
 

 
.modal-content, .caption { 
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: .6s; 
 
    animation-name: zoom; 
 
    animation-duration: .6s; 
 
} 
 

 
@keyframes zoom { 
 
    from { 
 
     transform: scale(0) 
 
    } 
 
    to { 
 
     transform: scale(1) 
 
    } 
 
} 
 

 
@-webkit-keyframes zoom { 
 
    from { 
 
     -webkit-transform: scale(0) 
 
    } 
 
    to { 
 
     -webkit-transform: scale(1) 
 
    } 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: .3s; 
 
} 
 

 
.close:hover, .close:focus { 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    color: #bbb; 
 
} 
 

 
.paganation { 
 
    color: #fff; 
 
    font-size: 40px; 
 
    position: absolute; 
 
    bottom: 10%; 
 
    right: 50%; 
 
    cursor: pointer; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="large"> 
 
    <img src="http://placehold.it/350x150?text=1" title="" alt="image01.jpg" /> 
 
</div> 
 

 
<ul id="thumbnail"> 
 

 
    <li><a href="http://placehold.it/350x150?text=1" class="active"><img src="http://placehold.it/350x150?text=1" title="" alt="image01.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=2"><img src="http://placehold.it/350x150?text=2" title="" alt="image02.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=3"><img src="http://placehold.it/350x150?text=3" title="" alt="image03.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=4"><img src="http://placehold.it/350x150?text=4" title="" alt="image04.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=5"><img src="http://placehold.it/350x150?text=5" title="" alt="image05.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=6"><img src="http://placehold.it/350x150?text=6" title="" alt="image06.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=7"><img src="http://placehold.it/350x150?text=7" title="" alt="image07.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=8"><img src="http://placehold.it/350x150?text=8" title="" alt="image08.jpg" /></a></li> 
 
    <li><a href="http://placehold.it/350x150?text=9"><img src="http://placehold.it/350x150?text=9" title="" alt="image09.jpg" /></a></li> 
 

 
</ul> 
 

 
<div class="modal-window"> 
 
    <span class="close">&times;</span> 
 
    <img class="modal-content"> 
 
    <div class="caption"></div> 
 
    <div class="paganation"> 
 
     <span class="prev">&#10094;</span> 
 
     <span class="next">&#10095;</span> 
 
    </div> 
 
</div>