Question

我正在尝试像youtube一样制作内容滑块

这是我的......

我的内容完全向右或向左滑动800px。但问题出在这里..当我先点击左侧图标时，点击右侧图标将无效！能解决这个问题吗？？

使用Javascript：

$(document).ready(function(){
    $("#trendingnexticon").on('click' ,function(){
      $("#trendingtable").animate({right: '+=800px'});
    });
 });

 $(document).ready(function(){
     $("#trendingpreviousicon").on('click' ,function(){
         $("#trendingtable").animate({left: '+=800px'});
     });
 });

HTML：

<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: hidden;">
  <table id="trendingtable" class="table" style="position:relative;">
    <a id="trendingpreviousicon" style="cursor:pointer; margin-top: 62px; 
position:absolute; z-index:1;" class="previous round">&#8249;</a>
    <a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px; 
margin-top: 62px; position:absolute; z-index:1;" class="next round">&#8250;
</a>
    <tr>
    <?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?>
      <td>
          <div class="media" style="border: 1px solid #e6e6e6; width:400px; 
padding: 0px;">
          <img src="images/<?=$tsingers['image'];?>" alt="<?
=$tsingers['name'];?>"
          class="pull-left img-responsive" style="width: 200px; height: 
150px;" id="artistimg">
          <div id="trendingmediabody" class="media-body">
            <p id="trendingname" style="font-size:14px; font-weight: 
bolder;"><?=$tsingers['name'];?></p>
            <p id="trendingcategory" style="font-size:12px; font-weight: 
bolder;"><?=$tsingers['category'];?></p></br></br>
          </div>
        </div>
      </td>
    <?php endwhile; ?>
    </tr>
  </table>
</div>

Answer 1

Heyo，你只需要一个$（文件）.ready（），你可以将两个函数放在那个函数中。

尝试检查检查器，看看幻灯片动画后是否有什么东西不与按钮重叠

Answer 2

我会猜测并说这是因为你动画left和right而不是其中一个。 left并不代表＆＃34;向左移动＆＃34;，这意味着，＆＃34;设置left CSS样式属性＆＃34;。并且left表示＆＃34;我的左边界相对于我最近的亲戚父亲的位置＆＃34;。

详细了解left和position CSS属性。

请改为尝试：

$(document).ready(function () {
    $("#trendingnexticon").on('click', function () {
        $("#trendingtable").animate({
            left: '-=800px'
        });
    });
    $("#trendingpreviousicon").on('click', function () {
        $("#trendingtable").animate({
            left: '+=800px'
        });
    });
});

Answer 3

“左”和“右”属性存在冲突。

$(document).ready(function(){
    $("#trendingnexticon").on('click' ,function(){
      $("#trendingtable").animate({right: '+=800px'});
    });

     $("#trendingpreviousicon").on('click' ,function(){
         $("#trendingtable").animate({right: '-=800px'});
     });
 });

P.S。：我也删除了双$（文件）.ready，因为一个就够了。

单击按钮后，另一个按钮不会单击

3 个答案: