javascript - 自定义 slider (切换 slider )无法使用 jquery

Question

正在使用 Jquery(切换 slider )。

• 加载时，左侧按钮应被禁用(当前不起作用)。
• 首次点击后，应启用右侧按钮，然后启用左侧按钮。
• 当我们到达最后一张幻灯片时，右侧按钮应该被禁用。(目前不工作)
• 当幻灯片转到第一个位置时，幻灯片不应再次移动
• 最后一张幻灯片也是如此

这是我的 jQuery 代码供引用。

$(".leftBtn").click(function(e) {
  goRight();
});
$(".rightBtn").click(function(e) {
  goLeft();
});


function goRight() { // inner stuff slides left
  var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1;
  var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

function goLeft() { // inner stuff slides right
  var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1;
  var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border
  if (newLeftMargin >= 0){
            $(".leftBtn").css("display", "none");  
         } else {
             $(".leftBtn").css("display", "block");
         }
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

* {
  Box-sizing: Border-box
}

.mycontainer {
  white-space: nowrap;
  overflow-x: hidden;
  width: 204px;
}

.box {
  display: inline-block;
  border: 2px black solid;
  padding: 20px;
  width: 200px;
  height: 100px;
  vertical-align: top;
  background-color: pink;
}

.box2 {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="rightBtn" type="button" value="Left">

<div class="mycontainer">

  <div class="innerLiner">
    <span class="box">
      This is box1     
    </span>
    <span class="box">
      This is box2   
    </span>
    <span class="box box2">
      This is box3    
    </span>
  </div>

</div>
<input class="leftBtn" type="button" value="Right">

Answer 1

您正在朝着正确的方向前进。以下是修复代码的一些提示:

1. 将按钮更新代码移至函数中，方便更新和调用。
2. 默认情况下显示两个按钮，并根据新的边距隐藏正确的按钮。
3. 在用户单击任何内容之前，使用初始边距调用该函数以禁用正确的初始按钮。

简而言之，

function updateButtons( newLeftMargin ) {
  $(".leftBtn,.rightBtn").show(); // Show both buttons by default
  if ( newLeftMargin >= 0 )
    $(".rightBtn").hide();
  if ( newLeftMargin <= -408 )
    $(".leftBtn").hide();
}
updateButtons(0)

下面是一个完整的片段。请注意，我有责任稍微优化您的其他代码。

function goRight() { // inner stuff slides left
  var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') );
  var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border
  updateButtons( newLeftMargin );
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

function goLeft() { // inner stuff slides right
  var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') );
  var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border
  updateButtons( newLeftMargin );
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

function updateButtons( newLeftMargin ) {
  $(".leftBtn,.rightBtn").show(); // Show both buttons by default
  if ( newLeftMargin >= 0 )
    $(".rightBtn").hide();
  if ( newLeftMargin <= -408 )
    $(".leftBtn").hide();
}
updateButtons(0)

$(".leftBtn").click( goRight );
$(".rightBtn").click( goLeft );

* {
  Box-sizing: Border-box
}

.mycontainer {
  white-space: nowrap;
  overflow-x: hidden;
  width: 204px;
}

.box {
  display: inline-block;
  border: 2px black solid;
  padding: 20px;
  width: 200px;
  height: 100px;
  vertical-align: top;
  background-color: pink;
}

.box2 {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="rightBtn" type="button" value="Left">

<div class="mycontainer">

  <div class="innerLiner">
    <span class="box">
      This is box1     
    </span>
    <span class="box">
      This is box2   
    </span>
    <span class="box box2">
      This is box3    
    </span>
  </div>

</div>
<input class="leftBtn" type="button" value="Right">