0

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

我做了这个小提琴：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%);
}

查询

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

谢谢你

4

2 回答 2

0

这是一个简单的方法：

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

如果你想要一个 prev next 函数，你只需要增加或减少 currentSlide 变量并将它传递给 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);
   }
});

您甚至可以在显示和隐藏功能中添加一些不错的过渡，例如淡入淡出或幻灯片 :)

希望这会有所帮助。

于 2013-05-29T14:08:37.993 回答
0

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

于 2013-05-29T12:20:49.160 回答