Question

我的home page上有一个文字滑块，可以根据选择的箭头单独显示幻灯片。目前，仅显示第一张幻灯片，之后每张幻灯片都是空白的。制作每个幻灯片时我缺少什么？

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

    });
});

Answer 1

查看此fiddle。我把它缩小到最低限度。

我开始使用具有固定宽度的滑块蒙版，并设置其他宽度。

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

我还必须做一些其他改动。其中之一是.animate()函数不会导致显示隐藏元素。它在documenation page上说明了这一点。不是通过调用.hide()来隐藏幻灯片，而是通过将掩码元素的溢出设置为隐藏而不在视图之外。

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

更新：

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

Answer 2

检查你的css：

slide：固定宽度，向左浮动。

容器：宽度n_slide * slide_（外部）_width

幻灯片掩码：与单个幻灯片宽度相同，溢出隐藏。

javascript内容滑块仅显示第一张幻灯片

2 个答案: