2015-03-31 76 views
2

在我點擊下一個按鈕'兩次'後,大圖只會變成下一張圖片。它適用於上一個按鈕,但無論何時重新加載頁面,下一個按鈕都不行。Jquery下一個按鈕不能與圖片庫一起工作

如果你能看看問題是什麼,那將是很好的,因爲我已經嘗試了很長時間來修復它,但是不能。先謝謝你。

<div > 
    <table id = "frame-table"> 
    <tr> 
     <td id = "left1"> 
     <img src="http://www.vintagevictorian.com/kuba_arrow_button_left.png" alt = "left"/> 
     </td> 
     <td id = "right1"> 
     <img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" alt = "right"/> 
     </td> 
    </tr> 
    </table> 
    <img class="img" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt="Chania" width="204" height="236"> 
</div> 

<div id = "wrapper"> 
    <ul id = "portfolio"> 
    <li><img class="img-thumbnail" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt = "img"/></li> 
    <li><img class="img-thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt = "img"/></li> 
    <li><img class="img-thumbnail" src="https://lh3.googleusercontent.com/-JE-Vccj5xwk/AAAAAAAAAAI/AAAAAAAAABg/aFghGr0aeYw/photo.jpg" alt = "img"/></li> 
    </ul> 
    <button id="zoom" type="button" class="btn btn-info"> 
    <span class="glyphicon glyphicon-search"> Zoom </span> 
    </button> 
</div> 

$(function(){ 
    var current_li =$("#portfolio li").first().parent(); 
    $("#right1").click(function(){ 
    if (current_li.is(":last-child")){ 
     var next_li = $("#portfolio li").first(); 
    } else{ 
     var next_li = current_li.next(); 
    } 

    var next_src = next_li.children("img").attr("src"); 
    alert(next_src); 
    $(".img").attr("src", next_src); 
    current_li = next_li; 
    }); 

    $("#left1").click(function(){ 
    if (current_li.is(":first-child")){ 
     var prev_li = $("#portfolio li").last(); 
    } else{ 
     var prev_li = current_li.prev(); 
    } 
    var prev_src = prev_li.children("img").attr("src"); 
    $(".img").attr("src", prev_src); 
    current_li = prev_li; 
    }); 
}); 
+1

如果您可以在這裏查看JSFiddle,那將會很棒。謝謝。 [Demo]:http://jsfiddle.net/#&togetherjs=RRt2OpHaB7 – user21 2015-03-31 18:36:34

+0

https://jsfiddle.net/48j9g4ng/ – user21 2015-03-31 18:46:02

回答

2
var current_li =$("#portfolio li").first().parent(); 

應該

var current_li =$("#portfolio>li").first(); 

本地測試,是工作。

+0

謝謝。它終於有效! – user21 2015-03-31 18:59:13

相關問題