滑块导航

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/