0

我的主页上有一个文本滑块，它应该根据选择的箭头单独显示幻灯片。目前，仅显示第一张幻灯片，之后的每张幻灯片都是空白的。制作每个单独的幻灯片放映我缺少什么？

jsfiddle

jQuery(document).ready(function($){
    // Setup Variables
    var slides = $('#slider_mask .slide_container').children();
    var total_slides = slides.children().length;
    var slide_width = $('#slider_mask').width();
    var current_slide = 0;

    slides.not(':first').hide();
    // Set the width of the slide_container to total width of all slides
    $('#slider_mask .slide_container').width(slide_width*total_slides);

    // Handle Right Arrow Click
    $('#slider_mask .right_button').on('click', function() {

        current_slide++;

        if(current_slide == total_slides){ current_slide = 0; }

        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');


    });

    // Handle Left Arrow Click
    $('#slider_mask .left_button').on('click', function() {

        current_slide--;

        if(current_slide < 0){ current_slide = total_slides-1; }

        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');

    });
});
4

2 回答 2

2

看看这个小提琴。我把它缩小到最低限度。

我从具有固定宽度的滑块蒙版开始，然后设置其他宽度。

Ludovico Grossi 关于使滑动元素向左浮动是正确的。当它们是没有浮动的“块”元素时，它们会堆叠。如果将它们更改为“内联”元素，则它们不能具有固定宽度。它可以将它们设置为“inline-block”，但我不知道所有浏览器是否都支持。将它们作为“块”并向左浮动有效。

我还不得不做一些其他的改变。其中之一是该.animate()功能不会导致显示隐藏元素。它在文档页面上说明了这一点。不是通过调用来隐藏幻灯片，而是通过.hide()将掩码元素的溢出设置为隐藏来隐藏它们。

我还将文本对齐中心放在幻灯片元素上，而不是容器元素上。

更新：

我创建了另一个小提琴，它以adeneo 小提琴中的代码开头，并包含必要的更改。我将注释放在所有添加、删除或更改的代码和 CSS 旁边。我不得不对 html 进行一项更改。我添加了<div id="home">包含所有内容的元素。没有它，CSS 选择器不会匹配任何东西。

于 2013-03-05T04:20:34.563 回答
1

检查你的CSS：

幻灯片：固定宽度，向左浮动。

容器：宽度 n_slide * slide_(outer)_width

幻灯片遮罩：同单张幻灯片宽度，溢出隐藏。

于 2013-03-02T23:17:29.343 回答