Question

我只是在一两个月前开始编码而且我遇到了一个我似乎无法找到解决方案的问题。

我有一个幻灯片，当点击一个按钮时会打开，我遇到的问题是，当页面加载时，幻灯片本身的控件之一（“右控制”）是可见的。

我需要它在幻灯片打开时与'幻灯片'一起淡入，然后在关闭幻灯片时隐藏。

任何帮助都将不胜感激。

以下是幻灯片的代码：

//幻灯片

$("#slideshow").css("overflow", "hidden");

manageControls(currentPosition);

$('.control').click(function () {

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;

    manageControls(currentPosition);

    $('#slides').animate({
        'left': slideWidth * (-currentPosition)
    }, 600);
});

function manageControls(position) {

    if (position === 0) {
        $('#left-control').hide();
    } else {
        $('#left-control').show();
    }

    if (position == slidesNumber - 1) {
        $('#right-control').hide();
    } else {
        $('#right-control').show();
    }
}
//End Slideshow

这是我的jsFiddle完整代码：

http://jsfiddle.net/tVsjY/2/

Answer 1

我觉得有点羞于为刚刚开始编码的人提供修复而不是解决方案，但也许这就是你想要的所有。将你的jsfiddle的第50行放在下面应该通过隐藏额外的可见范围来解决你的问题：

$('.control').hide();

但我对此不太满意的原因是因为我没有学习并向你解释为什么这个跨度首先出现。我可能会继续关注它，但请告诉我这是否是你想要的。

更新的解决方案：找到了问题/解决方案您在manageControls函数中隐藏/显示的控件将始终隐藏一个并显示一个。

问题：两个控件最初都可见您最初调用manageControls（currentPosition）;在第38行，其中currentPosition的值为0，因此左边的控件被隐藏，然后显示右边，这一点已经开始显示。

解决方案：替换manageControls（currentPosition）;在第38行，有以下内容：

$('.control').hide(); //Hides both controls

如果一切正常/有意义，请告诉我。）

Answer 2

您的

中存在逻辑错误

function manageControls(position){}

您正在将该功能用于两个目的。

根据您的幻灯片显示/隐藏左/右控件
显示/隐藏左/右控件，具体取决于滑块是可见还是隐藏。

但它总是好像是第一个场景。我的建议是简单地为你的函数添加另一个参数。

function manageControls(position, flag){}

发送“show”，“hide”和“check”标志中的值，以显示两个控件，隐藏两个控件并显示与幻灯片编号相关的内容。然后根据情况重新编写函数调用。

将css中.control的display属性设置为'none'。并在js中进行以下更改。

$(document).ready(function () {

var out = 0;
var currentPosition = 0;
var slideWidth = 400;
var slides = $(".slide");
var slidesNumber = slides.length;

$("#button").click(function () {

    if (out === 0) {
        manageControls(currentPosition, 'show'); // Show controls on slide show
        $("#center, #slideshow, .slide").animate({
            width: "400px"
        }, {
            queue: false,
            duration: 1900
        });
        $(".slide").delay(2000).animate({
            opacity: "1"
        }, 1500);
        out = 1;
    } else {
        manageControls(currentPosition, 'hide'); // Hide controls on slide hide
        $("#center, #slideshow, .slide").animate({
            width: "0px"
        }, {
            queue: false,
            duration: 2000
        });
        $(".slide").stop(true).animate({
            opacity: "0"
        }, 250);
        out = 0;
    }
});

//Slideshow
$("#slideshow").css("overflow", "hidden");

// No need for this line if .control set to hidden in css.
//manageControls(currentPosition);

$('.control').click(function () {

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;

    manageControls(currentPosition, 'check');  // Show/hide controls on control click

    $('#slides').animate({
        'left': slideWidth * (-currentPosition)
    }, 600);
});

function manageControls(position, flag) {
    // Checks for control display
    if (flag == 'check') {
        if (position === 0) {
            $('#left-control').hide();
        } else {
            $('#left-control').show();
        }

        if (position == slidesNumber - 1) {
            $('#right-control').hide();
        } else {
            $('#right-control').show();
        }
    } else if (flag == 'show') {
        $('.control').show();
    } else if (flag == 'hide') {
        $('.control').hide();
    }
}
//End Slideshow
});

但是你需要检查你的代码。可能是您是初学者，但您应该始终致力于优化代码。你需要编码代码。

Answer 3

找到了我需要做的解决方法。

由于manageControls函数根据#slides的当前位置隐藏/显示左/右控件，所以在加载时隐藏 .control 所需要做的就是隐藏 #slides < / strong>即可。

所以，如果我在第9行添加以下内容：

$("#center, #slideshow, .slide").hide();

然后 .show 点击它 - 它有效！

最新更新：

添加了以下几行以使其美观地用于眼睛（控制现在淡入视图）：

$(".control").stop(true).delay(1800).animate({opacity: "0.5"}, 2000); $(".control").stop(true).animate({opacity: "0"}, 400);

这是我更新的jsFiddle：

http://jsfiddle.net/tVsjY/18/

P.S。它还不是很漂亮，当幻灯片激活时，这两个控件需要淡入淡出。将在下一步工作，然后发布更新。

jQuery - 在加载时隐藏div，在动画完成后显示

3 个答案: