2014-12-02 125 views
0

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

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

我的相關代碼如下: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/

+0

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

+1

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

+1

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

回答

0

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

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

解決方案如下。

  1. 創建新功能

    功能verifyControlButton(){ 如果($( '#滑塊UL李:第一胎')。hasClass( 「最終」)){ $('一個。 control_next')隱藏();其他{ } else {('a.control_next')。show(); } };

  2. 設置呼叫到新的方法,在你的移動動作:

    //向左移動功能(分組​​) 功能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(); }); };

  3. 點擊控制通話簡單的方法。在點擊({) moveLeft(; }()函數)

    //調用函數 $( 'a.control_prev')點擊。

    $('a.control_next')。點擊(功能(){ moveRight(); });

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

+0

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