停用图库滑块上的按钮

时间:2011-05-24 13:16:02

标签: javascript

当我到达滚动图像的末尾时,我正在尝试使我的javascript / jquery滑块按钮停用(当图像一直向右移动时,必须停用MoveRight按钮并且只保留MoveLeft按钮激活,同样为移动LeftButton),任何人都可以帮忙吗?我不确定我是否正在使用 .attr()和removeAttr()正确。我在下面粘贴了我的代码。

<script type="text/javascript">
$(document).ready(function(){

//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var NoListed = $("ul.GalleryItem li").length;
var galleryItemWidth = 1881;    

$('.MoveRight')
$('.GalleryItem').css('width', galleryItemWidth);

//Check width of Gallery div on resize
$(window).resize(function(){
    var galleryWidth = $("#Gallery").innerWidth();
  });

$('.MoveLeft').click(function() {
  $(".GalleryItem2").animate({"left": "-=350px"}, "slow");
  $(".GalleryItem3").animate({"left": "-=280px"}, "slow");
  $(".GalleryItem").animate({
    left: '-=230',
  }, "slow", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
        $('.MoveLeft').removeAttr('disabled');}
        else{
        $('.MoveLeft').attr('disabled','disabled');
        $('.MoveRight').attr('disabled','disabled');
    }
  });
});

$('.MoveRight').click(function() {
  $(".GalleryItem2").animate({"left": "+=350px"}, "slow");
  $(".GalleryItem3").animate({"left": "+=280px"}, "slow");
  $(".GalleryItem").animate({
    left: '+=230',
  }, "slow", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft >= "0") { 
        $('.MoveLeft').removeAttr('disabled');}
        else{
        $('.MoveLeft').attr('disabled','disabled');
        $('.MoveRight').attr('disabled','disabled');
    }   
  });
});

});


</script>

1 个答案:

答案 0 :(得分:0)

首先,我看到你做了以下事情:

//Check width of Gallery div on resize
$(window).resize(function(){
    var galleryWidth = $("#Gallery").innerWidth();
});

我喜欢将变量保持为局部的事实,但在这种情况下应省略var关键字。您已经在包含此调整大小回调的函数中声明了galleryWidth,因此通过省略此处的var关键字,该值将分配给您在脚本中使用的变量,使用此va关键字,您只需创建一个新的galleryWidth变量在调整大小回调中可见,因此从未使用过。

现在启用和禁用按钮:

你可以保留一个currentitem计数器,并在每次移动moveright或者moveleft按钮时更新它。当此计数器达到0时,您禁用了moveleft按钮,当它达到项目数时,您禁用了moveright按钮,否则启用它们。