jQuery的 - 顯示/隱藏滑塊前prev /下一步按鈕

我試圖控制一個非常基本的滑塊（從簡單的例子在線修補）導航。

我的目標是在到達最後一張幻燈片時隱藏「下一步」按鈕，相反地在第一張幻燈片中隱藏「上一頁」按鈕，可以通過捕捉「活動」（當前幻燈片顯示）上課，然後隱藏它？

我的相關代碼如下：jQuery的 - 顯示/隱藏滑塊前prev /下一步按鈕

jQuery(document).ready(function ($) { 

//set vars for slider size 
var slideCount = $('#slider ul li').length; 
var slideWidth = $('#slider ul li').width(); 
var slideHeight = $('#slider ul li').height(); 
var sliderUlWidth = slideCount * slideWidth; 

$('#slider').css({ width: slideWidth, height: slideHeight }); 

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

$('#slider ul li:last-child').prependTo('#slider ul'); 
//move left function (prev) 
function moveLeft() { 
    $('#slider ul').animate({ 
     left: + slideWidth 
    }, 700, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 
//move right function (next) 
function moveRight() { 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 700, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 
// call functions on click 
$('a.control_prev').click(function() { 
    moveLeft(); 
}); 

$('a.control_next').click(function() { 
    if ($(this).hasClass('final')){ 
    $('a.control_next').hide(); 
    } 
    else{ 
     moveRight(); 
    } 
}); 

});

和HTML滑塊列表：

<div id="slider"> 
<a href="#" class="control_next">></a> 
<a href="#" class="control_prev"><</a> 
    <ul> 
    <li><img src="sme1.png" height="550"/></li> 
    <li><img src="sme2.png" height="550"/></li> 
    <li><img src="sme3.png" height="550"/></li> 
    <li class="final"><img src="sme4.png" height="550"/></li> 
    </ul> 
</div>

我能想到的接近它的不同的方式，但是這是解決方案，我就試圖解決鍛鍊，任何幫助讚賞！

jsfiddle：http://jsfiddle.net/o31ksujt/3/

來源

2014-12-02 Andyjm

我已經包括了所有的jQuery和相關HTML，感謝 – Andyjm 2014-12-02 15:50:03

我剛剛創建了一個的jsfiddle並不能得到它做任何事情。你能在這裏創建一個片段，或者是一個重現此問題的jsFiddle嗎？ – j08691 2014-12-02 15:54:08

你忘了你的CSS也添加了，否則我們不能在jsfiddle中使用它。或者只是爲我們做一個工作jsfiddle – Stefan 2014-12-02 15:55:00

您可以在動畫結尾添加控件。

在您的代碼中也出現錯誤，在您的點擊函數中您驗證了$(this).hasClass('final')，但是相對於標籤a，您必須指定$('#slider ul li:first-child')。

解決方案如下。

創建新功能

功能verifyControlButton（）{ 如果（$（ '＃滑塊UL李：第一胎'）。hasClass（「最終」））{ $（'一個。 control_next'）隱藏（）;其他{ } else {（'a.control_next'）。show（）; } };
設置呼叫到新的方法，在你的移動動作：

//向左移動功能（分組）功能moveLeft（）{ $（ '＃滑塊UL'）動畫（{ 左： + slideWidth }，700，function（）{（'＃slider ul li：last-child'）。prependTo（'＃slider ul'）; $（'＃slider ul'）.css（'left' ，'）; verifyControlButton（）; }）; }; //向右移動功能（下）功能MoveRight的（）{ $（ '＃滑塊UL'）動畫（{ 左： - 。slideWidth }，700，函數（）{ $（'＃滑塊UL李：'first'）。appendTo（'＃slider ul'）; $（'＃slider ul'）.css（'left'，''）; verifyControlButton（）; }）; };
點擊控制通話簡單的方法。在點擊（{） moveLeft（; }（）函數）

//調用函數 $（ 'a.control_prev'）點擊。

$（'a.control_next'）。點擊（功能（）{ moveRight（）; }）;

http://codepen.io/anon/pen/gbaoxK

來源

2014-12-02 16:35:38 Marino

謝謝，這肯定適用於'最後'幻燈片（幻燈片4），所以我第一個可以使用相同的邏輯。 – Andyjm 2014-12-03 09:41:45

jQuery的 - 顯示/隱藏滑塊前prev /下一步按鈕

回答

相關問題