Question

我目前正在使用全屏滑块，该滑块应向左或向右移动，具体取决于用户点击的按钮。单击下一步时，它可以很好地工作，但是当点击上一个时，滑块就会淡入，而不是滑动，尽管与下一个按钮具有相同的代码（但是相反的边距）。

以下是我正在做的事情（next和prev按钮）：

    $("#prevproject").click(function(e) {
    e.preventDefault();
    //subtract 1 from i unless i is 0, then set i = 12 (last element)

    if (i == 0) {
      i = 12;
    } else {
      i = i - 1;
    }
    $('#project').attr('data-name', projects[i]);
    $('#project #slide').animate({
          'marginRight': '25%',
          'opacity': 0
        }, 200, function() {

          switchProjects(projects[i]);

          $('#project #slide').css({
            'marginRight': '-25%'
          });
          $('#project #slide').animate({
            'marginRight': '0',
            'opacity': 1
          }, 200);
          //=================================
});




});

$("#nextproject").click(function(e) {
    e.preventDefault();
    //add 1 from i unless i is 12, then set i = 0

    if (i == 12) {
      i = 0;
    } else {
      i = i + 1;
    }

    $('#project').attr('data-name', projects[i]);
    $('#project #slide').animate({
          'marginLeft': '25%',
          'opacity': 0
        }, 200, function() {

          switchProjects(projects[i]);

          $('#project #slide').css({
            'marginLeft': '-25%'
          });
          $('#project #slide').animate({
            'marginLeft': '0',
            'opacity': 1
          }, 200);
          //=================================
});

我有一个内部div的容器div，并将滑动效果放在内部div上。当关闭屏幕时，内容将通过switchProjects功能加载，然后使用新内容重新滑入。

 <div id="project">
  <div id="slide">
  <div class="row">
    <div class="column small-12 medium-4">
      <h4></h4>
      <p></p>
      <img alt="" id="map"/> </div>
  </div>
  </div>
</div>

适合下一个但不是之前的。有什么想法吗？

Answer 1

对于任何寻找的人。分辨率是将marginLeft设置为我在下一个函数与设置marginRight时所做的相反。

for key in d123_new:
    print('%s\t%s\t%s\t%s' %(d123_new[key]['Skill'], d123_new[key]['Magic'], x for x in d123_new[key]['wo_mana'], y for y in d123_new[key]['wi_mana']))

全屏内容滑块仅向右滑动

1 个答案: