2017-08-02 276 views
0

我試圖做一個內容滑塊就像YouTube的按鈕被點擊後,另一個按鈕就不會點擊

enter image description here

這裏是我的..

enter image description here

我的內容向右或向左滑動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> 
+3

爲什麼你有兩個不同的'$(document).ready()'? – Kevin

+1

我們需要一個[最小,完整和可驗證示例](https://stackoverflow.com/help/mcve) – Liam

+0

如果您第一次點擊,您的右側圖標是否正常工作? – Vitalii

回答

0

「左」 和 「右」 的屬性是相互矛盾的。

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

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

P.S .:我也刪除了雙$(document).ready,因爲一個就足夠了。

+0

是的,'左'和'右'屬性是相互矛盾的。這工作正常〜..謝謝布魯夫! – Grimmpachi

+0

另外,有沒有辦法來修復div的長度,所以它不會繼續向左或向右移動800px ..?我嘗試給它一個固定的像素大小,並嘗試「寬度:100%」,但都沒有工作.. reallllllly抱歉在這個xD作爲一個新手.. – Grimmpachi

+0

你需要在JavaScript中手動計算總寬度。由於我目前在手機上,因此我可以稍後檢查如何操作。 – Chrisstar

0

Heyo,你只需要一個$(文件)。就緒(),你可以把兩個功能一個內。在檢查

嘗試檢查,看看是否幻燈片動畫後,因爲你是動畫leftright,而不是一個東西不重疊的按鈕

0

我將採取猜測,並說這是或另一個。 left並不意味着「向左移動」,它表示「設置left CSS樣式屬性」。 left意思是「我的左邊框相對於我最近的相對父母屬於哪裏」。

閱讀關於leftposition CSS屬性的更多信息。

試試這個:

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