0

我有一个名为#slider 的 div，它的宽度为 400%，overflow-x 设置为隐藏。#slider DIV 以 25% 的比例填充了 4 个 div（因此每个 div 都拉伸了 DOM 的 100%）。页面加载后，我立即将 div 向左移动 -100%，以便 div 可以从页面加载时左右移动。

我正在为#slider DIV 设置动画，将其左右移动以将每个子 DIV 移动到 DOM 中的视图中，使用一个简单的方法：

$(".goright").click(function(){
$("#slider").animate({left:'-=100%'}, 400);
});

和

 $(".goleft").click(function(){
 $("#slider").animate({left:'+=100%'}, 400);
 });

分别。

效果很好。

但是，一旦#slider 的位置达到<= -300% 或>= 0%，我试图淡出使滑块移动的按钮。如果它被隐藏，则淡入另一个。

页面初始加载后，以下代码似乎可以工作：

// Make the right slide work
$(".goright").click(function(){
    if ($('.goleft').is (':hidden')) {
        $('.goleft').fadeIn();
    };
    $("#slider").animate({left:'-=100%'}, 400, function() {
         var leftPos = $('#slider').css('left');
         if (leftPos >= '-300%') {
              $('.goright').fadeOut(200);}
        });

    });

// Make the left slide work
$(".goleft").click(function(){
    if ($('.goright').is (':hidden')) {
        $('.goright').fadeIn();
    };
    $("#slider").animate({left:'+=100%'}, 400, function() {
         var leftPos = $('#slider').css('left');

         if (leftPos >= '0%') {
              $('.goleft').fadeOut(200);}
        });

    });

但似乎如果页面在渲染后调整大小，右侧控制按钮无法以正确的左侧值淡出，淡出过早。

任何想法出了什么问题？任何帮助表示赞赏！

您可以在这里查看网站：http: //www.newactorscompany.com/new/indexx.html

4

1 回答 1

0

我会通过不同的方式根据框架显示/隐藏箭头。如果您显示第一帧，则隐藏左箭头。如果您显示最后一帧，则隐藏右箭头。通过简单的帧计数器。不是按位置，因为它看起来位置会随着您调整窗口大小而变化，即使使用百分比也是如此。

于 2013-03-23T10:40:09.237 回答