沒有按鈕的滑塊 - 上/下一個li觸發滑塊

Question

我試圖獲得帶有實際上一個/下一個幻燈片觸發的上一個/下一個動作的傳送帶。

我可以讓它工作，但我希望幻燈片可以隨動畫過渡。我所能想到的只有淡入/淡出效果，並不能完全消除它。

有沒有什麼建議你可以建議我順利地移動.prev/.next> .main後點擊.prev/.next？

HTML：

<div class="view"> 
       <ul> 
        <li class="prev" data-id="1">first 

        </li><!-- 
        --><li class="main" data-id="2">second 

        </li><!-- 
        --><li class="next" data-id="3">third 

        </li><!-- 
        --><li data-id="4">fourth 

        </li><!-- 
        --><li data-id="5">fifth 

        </li> 
       </ul> 
      </div> 

CSS：

.view { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
} 

.view ul { 
    list-style-type: none; 
    display: block; 
    height: 100%; 
    width: auto; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
} 

.view ul li { 
    display: inline-block; 
    width: 80%; 
    height: 80%; 
    margin: 5% 10%; 
    padding: 0; 
    background: white; 
    border: 2px solid #ccc; 
} 

.view ul li:hover { 
    border-color: #75B5FF; 
} 

.view ul li.main { 
    top: -5%; 
} 

.view ul li.prev { 
    height: 75%; 
    margin-right: -5%; 
    margin-left: -75%; 
    top: 5%; 
} 

.view ul li.next { 
    height: 75%; 
    margin-left: -5%; 
} 

的jQuery：

$('body').on('click', 'li.prev', function() { 
    $("body").find("li").eq(2).removeClass("next") 
    $(this).next().removeClass().addClass("next"); 
    $(this).removeClass().addClass("main"); 
    $(this).prev().removeClass().addClass("prev"); 

    var $this = $(this), 
     callback = function() { 
      $this.siblings(':last()').insertBefore($this).addClass("prev"); 
     }; 
    $this.fadeIn(100, callback).fadeIn(100); 
}); 

$('body').on('click', 'li.next', function() { 
    $("body").find("li").eq(1).removeClass("prev") 
    $(this).prev().removeClass().addClass("prev"); 
    $(this).removeClass().addClass("main"); 
    $(this).next().removeClass().addClass("next"); 

    var $this = $(this), 
     callback = function() { 
      $this.siblings(':first()').insertAfter($this.siblings(':last()')); 
     }; 
    $this.fadeOut(100, callback).fadeIn(100); 
}); 

這是extenso：

https://jsfiddle.net/mptjsybq/

-

此外，有沒有辦法給更多的邊距到.prev /李。接下來的？我正在嘗試，但它必須是某種對齊方式，才能將所有的內容命令到最高的內容。我希望.main li的位置高於.prev/.next。

Answer 1

使用CSS轉換，這種效果是容易實現。

最關鍵的是這行代碼：

.view ul li { 
    /* ... */ 
    transition: all 0.5s ease; 
} 

當然，如果你想成爲額外的不錯的瀏覽器，你總是可以做到這一點，而不是：

.view ul li { 
    /* ... */ 
    transition: margin-left 0.5s ease, margin-right 0.5s ease; 
} 

這樣，瀏覽器只需計算margin-left和margin-right，而不是所有的屬性。

不要忘了從你的jQuery中刪除fadeIn和fadeOut！

這裏是一個的jsfiddle演示：https://jsfiddle.net/239pcojn/2/

CSS3轉換是一個驚人的天賦，讓你做各種動畫沒有JavaScript。你可以看看這裏的文檔： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Answer 2

您提出的問題很複雜，因爲需要考慮很多事情。

另一種選擇是在現有滑塊上建立您正在尋找的功能。 像這樣：http://jsfiddle.net/mmyp7n3j/2/

HTML：

<div id="container" style="width: 100%;overflow: hidden;"> 
    <div style="position:relative;width: 50%;margin: 0 auto;"> 
     <div id="slider" style="width: 100%;overflow: visible !important;"> 
      <img src="http://webbies.dk/assets/files/SudoSlider/package/images/01.jpg" alt="img" /> 
      <img src="http://webbies.dk/assets/files/SudoSlider/package/images/02.jpg" alt="img" /> 
      <img src="http://webbies.dk/assets/files/SudoSlider/package/images/03.jpg" alt="img" /> 
      <img src="http://webbies.dk/assets/files/SudoSlider/package/images/04.jpg" alt="img" /> 
      <img src="http://webbies.dk/assets/files/SudoSlider/package/images/05.jpg" alt="img" /> 
     </div> 
    </div> 
</div> 

的JavaScript：

$(document).ready(function(){ 
    var sudoSlider = $("#slider").sudoSlider({ 
     continuous:true, 
     prevNext: false, 
     initCallback: function() { 
      this.css("overflow", "visible"); 
     } 
    }); 

    $("body").on("click", ".slide", function (e) { 
     var slide = Number($(e.target).attr("data-slide")); 
     sudoSlider.goToSlide(slide); 
    }); 
}); 

（聲明，我所使用的插件背後的傢伙）。

您可以找到插件的網站上更多的文檔：http://webbies.dk/SudoSlider/