Question

你可以帮我解决这个问题吗？我正在尝试使用此页面幻灯片方法

$(document).ready(function()
{
    var slider_width = $('.pollSlider').width();//get width automaticly
  $('#pollSlider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
    {
        $('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
    }
    else
    {
    if(!$(this).is(':animated'))//perevent double click to double margin
        {
            $('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
        }
    }


  });
 });

这就是我一直在尝试的事情

http://jsfiddle.net/ejkim2000/f7DVK/

但我遇到了一些问题。

我遇到的第一个问题是触发按钮地点获得保证金，因此推送地点之后的句子。我在此代码中删除了＃pollSlider-button

$（'。pollSlider，＃pollSlider-button'）。animate（{“margin-right”：' - ='+ slider_width}）; }

从按钮禁用边距但最终让幻灯片页面向右滑动。有没有什么方法可以让幻灯片页面工作而没有按钮上的边距？

另一个问题是我在幻灯片页面输入了另一个按钮来关闭动作，但它根本不起作用，我甚至无法理解为什么。希望有人可以帮助使这个关闭按钮工作。

只是你的信息，我想用css使用宽度和高度，因为我更容易使幻灯片页面响应，我也想将此方法应用于其他方向。

万分感谢！

Answer 1

试试这个

工作 DEMO1

使用相同的按钮关闭并打开滑块

$(document).ready(function () {
    var slider_width = $('.pollSlider').width(); //get width automaticly
    $('#pollSlider-button').click(function () {
        if ($('.pollSlider').css("margin-right") == 0 + "px") {
            $('.pollSlider').animate({
                "margin-right": '-=' + slider_width
            });
        } else {

            $('.pollSlider').animate({
                "margin-right": '+=' + slider_width
            });

        }


    });
});

试试这个

工作 DEMO2

这是单独的按钮，用于打开和关闭

$(document).ready(function () {
    var slider_width = $('.pollSlider').width();
    $('#pollSlider-button').click(function () {   //open button
        if ($('.pollSlider').css("margin-right") == "-" + slider_width + "px") {
            $('.pollSlider').animate({
                "margin-right": '+=' + slider_width
            });
        }
    });
 $('#pollSlider-button2').click(function () {  //close button with different id
        if ($('.pollSlider').css("margin-right") == 0 + "px") {
            $('.pollSlider').animate({
                "margin-right": '-=' + slider_width
            });
        }
    });

});

希望这有帮助，谢谢

页面幻灯片的问题

1 个答案: