滑塊導航

Question

我想爲一個項目製作這個簡單的滑塊。

我有此琴：http://jsfiddle.net/6PEgu/6/

我需要建立我的導航幫助，所以我可以跳轉到不同的幻燈片背部和第四使用CSS類。我不知道如何從這一點做到這一點。我需要jquery來切換我的滑塊面板上的類與類取決於哪個按鈕被按下。

HTML

<div class="slider-wrap"> 
<div class="slider-nav"> 
    <ul> 
     <li><span class="slide-one">Slide red</span> 
     </li> 
     <li><span class="slide-two">Slide blue</span> 
     </li> 
    </ul> 
</div> 
<div class="slider-panel-wrap"> 
    <section class="slider-panel red-background" id="slider-panel-1">TEST SIDE 1 
     <div class="slider-caption-wrap"></div> 
    </section> 
    <section class="slider-panel blue-background" id="slider-panel-1">TEST SIDE 2 
     <div class="slider-caption-wrap"></div> 
    </section> 
</div> 

CSS

.slider-wrap { 
    width:100%; 
    height:100%; 
    background-color: #567; 
    overflow: hidden; 
} 
.slider-nav { 
    position: fixed; 
    bottom: 5%; 
    left: 5%; 
    z-index: 2; 
    cursor:pointer; 
    text-decoration:underline; 
} 
.slider-panel-wrap { 
    width:100%; 
    height:100%; 
    background-color: #F50; 
} 
.slider-panel { 
    width:100%; 
    height:100%; 
    background-color: #F20; 
} 
.red-background { 
    background-color: #F20; 
} 
.blue-background { 
    background-color: #567; 
} 
.slider-wrap-0 { 
    -webkit-transform: translateY(0%); 
    -moz-transform: translateY(0%); 
    -o-transform: translateY(0%); 
    -ms-transform: translateY(0%); 
    transform: translateY(0%); 
} 
.slider-wrap-100 { 
    -webkit-transform: translateY(-100%); 
    -moz-transform: translateY(-100%); 
    -o-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%); 
} 

JQUERY

$(document).ready(function() { 
    $('.slide-two').click(function() { 
     $(".slider-panel-wrap").addClass("slider-wrap-100"); 
    }); 
}); 

謝謝

Answer 1

這裏有一個簡單的方法：

• 算子
• 隱藏的所有幻燈片
• 顯示第一個數字滑動並將currentSlide var設置爲0
• make as lide函數：將索引作爲參數傳遞。隱藏所有幻燈片，顯示相當於參數的幻燈片...

如果您想要prev next函數，您只需增加或減少currentSlide var並將其傳遞給幻燈片函數。

我希望我的英語可以理解。

**（更新）小的實現：**

var slides = $(YOURCONTAINER).children(yourslideclass); 
slides.hide(); 
var numberOfSlides = $(YOURCONTAINER).children(yourslideclass).size()-1; 
var currentSlide = 0 

function changeSlide(slideID){ 
currentSlide.hide(); 
$("yourslideclass:eq(slideID)").show(); 
currentSlide = slideID; 
} 

對於下一張幻燈片功能，每爲例：

$(nextSlideButton).on('click',function(){ 
    if(currentSlide+1 <= numberOfSlides){ 
     changeSlide(currentSlide+1); 
    } 
}); 

而且你甚至可以添加像淡入淡出或滑動了一些不錯的過渡在顯示和隱藏功能:)

希望這會有所幫助。

Answer 2

如果我理解正確，那麼現在錯誤的是你不能導航回紅色幻燈片。 試試這個擴展您的jQuery這樣的：

$(document).ready(function() { 
$('.slide-one').click(function() { 
    $(".slider-panel-wrap").removeClass("slider-wrap-100"); 
    $(".slider-panel-wrap").addClass("slider-wrap-0"); 
}); 
$('.slide-two').click(function() { 
    $(".slider-panel-wrap").removeClass("slider-wrap-0"); 
    $(".slider-panel-wrap").addClass("slider-wrap-100"); 
}); 
}); 

http://jsfiddle.net/PaulvdDool/6PEgu/8/