使用Next/Previous按鈕切換圖片

有沒有什麼方法可以用jQuery切換使用next/prev按鈕的圖片？這裏是代碼：使用Next/Previous按鈕切換圖片

<div class="prevDiv"> 
    <a href="#"><img src="images/prev.png" alt="previous" /></a> 
</div> 
<div class="pic" id="picwebd"> 
    <img src="images/portfolio/webdesign/webd1.jpg" class="portPic" /> 
</div> 
<div class="nextDiv"> 
    <a href="#"><img src="images/next.png" alt="previous" /></a> 
</div>

我試着修改這個代碼，以我的需要：http://jsfiddle.net/x5mCR/16/但我沒有成功。我認爲在圖像src中遞增和遞減數字就足夠了，但我不能拿出像樣的代碼來做到這一點。谷歌也沒有幫助。

來源

2013-11-26 user2660811

你是什麼試圖做什麼？上一頁和下一頁按鈕可以瀏覽圖像？ –

對於你發佈的代碼，你需要知道幾件事情。 'prev（）'是遍歷樹的jquery方法。如果你想返回，你可以使用'prev（）'。但是這僅僅是不夠的，當你處於第一個位置時，如果你按回去，你想要走到最後。所以你可以使用'$（'＃fullimage img：last'）。fadeIn（）;'。像[這]（http://jsfiddle.net/r7t6G/）。現在，通過這兩種代碼，您可以合併並創建所需的下一個/上一個按鈕。 – wendelbsilva

請發佈您的代碼修改並告訴我們出了什麼問題。 – showdev

var picNumber = 1; 

$(".nextDiv").click(function() { 
    picNumber++; 
    if (picNumber > 3) picNumber = 1; // Change 3 to how many pictures there are. 
    $(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg"); 
}); 
$(".prevDiv").click(function() { 
    picNumber--; 
    if (picNumber < 1) picNumber = 3; // Change 3 to how many pictures there are. 
    $(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg"); 
});

來源

2013-11-26 22:31:35

與thumbnail類取下錨，並給予相應的<img>標籤的thumbnail類，然後使用縮略圖類jQuery的點擊方法：

$(".thumbnail").click(function() { 
    $(".fullimage").src = $(this).attr("src"); 
});

確保您在#fullimage有一個單一的.fullimage DIV。

這與下一個/上一個按鈕不一樣 - 但它會修復您製作的JSFiddle。

http://jsfiddle.net/x5mCR/34/

來源

2013-11-26 22:32:02 unclemeat

如果我理解正確，你正在嘗試使用箭頭鍵來回移動圖片之間......所以，如果是這樣的話，我建議考慮看看這篇文章： Binding arrow keys in JS/jQuery

此外，爲了您的方便，我只是把代碼從該職位，並結合它的功能在你的小提琴得到這樣的：

$(document).keydown(function (e) { 
    if (e.keyCode == 39) { 
    $(".fullimage").hide(); 
    var next = $(this).next(); 
    if (next.length > 0) { 
     next.fadeIn(); 
    } else { 
     $('#fullimage img:first').fadeIn(); 
    } 
    return false; 
}

}）;

在測試中，它看起來可能需要一些修改，而且當你按下後退按鈕時，你顯然需要創建一個類似的功能，但我認爲如果我正確理解你的問題，這是一個很好的出發地。

來源

2013-11-26 22:32:55 dpwivagg

如果有人讀這篇文章想要一個不同的方法，仍然使用JQuery fadeIn，Im在該代碼下面發佈。

Here你可以找到它的小提琴。

這裏的JavaScript部分

//At the start will show the first image 
$('#fullimage img.fullimage:first-child').fadeIn(); 
//Keep track of the image currently being visualized 
var curr = $('#fullimage img.fullimage:first-child'); 

$('#next').on('click', function() { 
    //Hide Current Image 
    curr.hide(); 
    //Find Next Image 
    var next = curr.next(); 
    //If theres no next image (is the last img), go back to first 
    if (next.length == 0) next = $('#fullimage img:first'); 
    //Fade In 
    next.fadeIn(); 
    //Save in curr the current Image 
    curr = next; 
    return false; 
}); 

$('#prev').on('click', function() { 
    curr.hide(); 
    var prev = curr.prev(); 
    if (prev.length == 0) prev = $('#fullimage img:last'); 
    prev.fadeIn(); 
    curr = prev; 
    return false; 
});

這裏的HTML部分

<div id="fullimage"> 
<img class="fullimage" src="http://i.imgur.com/RHhXG.jpg" /> 
<img class="fullimage" src="http://i.imgur.com/p1L2e.jpg" /> 
<img class="fullimage" src="http://i.imgur.com/NsrI0.jpg" /> 
<img class="fullimage" src="http://i.imgur.com/Ww6EU.jpg" /> 
</div> 
<a href="#"><label id="prev">previous</label></a> 
<a href="#"><label id="next">next</label></a>

來源

2013-11-26 22:50:02 wendelbsilva

下面是動態的，簡單的腳本減少你的HTML代碼

http://jsfiddle.net/x5mCR/32/

$("#thumbnail a").on('click', function (eve) { 
    eve.preventDefault(); 
    var link = ($(this).attr("href")); 
    var content = '<img src="' + link + '"/>'; 
    $("#fullimage").hide().html(content).fadeIn('slow'); 

});

來源

2013-11-26 22:52:13 VenomVendor

使用Next/Previous按鈕切換圖片

回答

相關問題