Question

我正在尝试为项目制作这个简单的滑块。

我需要帮助构建我的导航，这样我就可以使用CSS类跳转到不同的幻灯片和第四个。我不知道从这一点开始如何做到这一点。我需要jquery来切换我的slider-panel-wrap上的类，类依赖于按下的按钮。

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

如果我理解正确，那么现在错误的是您无法导航回红色幻灯片。试试这样扩展你的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/

Answer 2

这是一个简单的方法：

计算孩子的数量
隐藏所有幻灯片
显示第一张幻灯片并将currentSlide var设置为0
制作幻灯片功能：将索引作为参数传递。隐藏所有幻灯片，显示相当于参数的幻灯片......

如果你想要一个prev next函数，你只需要递增或递减currentSlide var并将它传递给slide函数。

我希望我的英语是可以理解的。

**（更新）一点实施：**

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);
   }
});

你甚至可以在节目和隐藏功能中添加一些漂亮的过渡，如淡入淡出或滑动：）

希望这会有所帮助。

滑块导航

2 个答案: