jQuery中的圖像滑塊，實際幻燈片為next / prev觸發器

Question

我是一名設計師，對jQuery只有一點點了解。 但我喜歡學習:)所以我決定自己做下面的事情，我不能讓它工作。

我的想法是有一個帶有實際幻燈片的滑塊作為next / prev按鈕。 因此，我可以通過單擊實際的下一張幻燈片轉到下一張幻燈片 - 與上一張幻燈片相同。 我想下面的圖片顯示了我的意思。

期望的效果

我試過這樣做：

1. 將一個類.main分配給主圖像
2. 將類.prev分配給左側的部分隱藏圖像
3. 將類.next分配給右側的部分隱藏圖像

當我點擊.next時，我更改了類.main> .prev，.next> .main，.next +1> .next。

現在我可以一步到位，它可以工作，類改變，它工作正常。 但是當我點擊now-.next類時，jQuery似乎現在無法識別它的.next並響應它，好像它仍然是.main類。 更新的類沒有響應（now- .main類仍然作為.next工作，好像jQuery沒有讀取更改）。

這是HTML：

<div class="view">
    <ul>
        <li class="left" data-id="1"></li>
        <li class="main" data-id="2"></li>
        <li class="right" data-id="3"></li>
        <li data-id="4"></li>
        <li data-id="5"></li>
    </ul>
</div>

和劇本：

$(".next").click(function(){
    $(this).prev().removeClass("main").addClass("prev");
    $(this).removeClass("next").addClass("main");
    $(this).next().addClass("next");
    $(".view ul li:first").animate({marginLeft: '-=57%'});
    $(".view ul li.main").animate({marginLeft: '-=15%'});
});

我想這是為你蹣跚學步的談話，但也許你可以幫助我開始工作。 你怎么會這件事？ 有任何想法嗎？

非常感謝！

干杯!

Answer 1

這不是一個蹣跚學步的談話，因為你需要注意一些陷阱。

首先， click處理程序不適用於新的.next這種方式。 你需要使用

$('body').on('click', 'li.next', function() {

而是使其適用於動態內容。
另一個問題是您忘記刪除.prev類

$(".prev").removeClass("prev");

另一個小錯誤是： $(".view ul li:first").animate({marginLeft: '-=57%'}); 它始終采用第一個元素，但在第一個幻燈片后，它應該采用.prev 。 （所以把它li.prev ）。 我想btw你使用class="prev"而不是left （錯誤的問題）。

請在此處查看完整代碼： http ： //jsfiddle.net/a8Lf9r68/3/

---

正如@MōIđɍɨɇƶ所說，你需要一些額外的代碼來處理最后一次和第一次元素點擊。 但這取決於你想要什么，我認為它超出了問題的范圍。