jQuery - 刪除下一個，從滑塊上一個按鈕

我試圖尋找這個，但我很難找到直接相關的東西。我是新來的jQuery/Javascript，所以任何幫助將不勝感激！謝謝！jQuery - 刪除下一個，從滑塊上一個按鈕

我有一個自定義滑塊功能與3幻燈片中，我用jQuery在幻燈片之間來回切換。每張幻燈片寬1040px。每張幻燈片相對定位，並向左浮動。

我想隱藏我的「按鈕 - 右邊」當我的滑塊在開始（所以你不滾動到一個空白區域），並隱藏我的「按鈕左」當我的滑塊在末尾（再次，所以你不要滾動到一個空白區域）。

我可以用什麼邏輯來做到這一點？

$(function(){ 
$(".button-right").click(function() { 
    $(".portfolioSection").animate({left: "-=1040" }, "slow"); 
}); }); 

$(function(){ 
$(".button-left").click(function() { 
    $(".portfolioSection").animate({left: "+=1040" }, "slow"); 
}); });

下面是HTML

<div class="portfolioImg" style="background-image: url(images/featured-flushed.jpg);"> 
    <div class="portfolioImgOver"> 
     <div class="button-right">Next</div> 
     <div class="button-left">Back</div> 
     <div class="portfolioSection"> 
      <div class="finley"></div> 
      <div class="portfolioContent"> 
       <h2>Flushed</h2><br/><br/>Flushed was a project planned for release on mobile platforms.<br /><br />My responsibilities for Flushed included: establishing a visual direction for the game, creating stylized 3D models, and developing technical game art, including textures, user interfaces and sprite sheets.<br /><br />I also worked with another artist to guide and assist with creating concept art, story mechanics and level designs.<br /><br /><span style="font-size:10px; color:#aaa;">Flushed is owned by Applied Studios, LLC.</span> 
      </div> 
     </div> 

     <div class="portfolioSection"> 
      <div class="portfolioContent"> 
       <h2>WHOA! Another div</h2><br/><br/>Here is some crazy cool stuff that I bet you thought you would never see. 
      </div> 
     </div> 

     <div class="portfolioSection"> 
      <div class="portfolioContent"> 
       <h2>WHOA! Another div</h2><br/><br/>Here is some crazy cool stuff that I bet you thought you would never see. 
      </div> 
     </div> 

     <div class="clear"></div> 

    </div> 
</div>

這裏是CSS

<style>.portfolioImg {width:1040px; height:600px; background-color:#efefef; margin-bottom:150px; z-index:1; overflow:hidden;}.portfolioImgOver{width:2080px; height:600px; background: rgba(25,25,25,.94);margin-bottom:150px; display:none; z-index:2; left:0px; position:relative;}.portfolioSection{width:1040px; height:600px; position:relative; float:left;}.portfolioContent{width:300px; color:#dedede; padding:40px; float:left; line-height:22px;}.portfolioContent a{color:#dedede; border-bottom:dotted 1px #888; padding-bottom:1px; text-decoration:none;}.button-right {width:60px; background:#333; color:#fff; padding:10px; position:absolute; z-index:3; right:1040px; top:300px; cursor:pointer; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s;}.button-right:hover {background:#777; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s;}.button-left {width:60px; background:#333; color:#fff; padding:10px; position:absolute; z-index:3; left:0px; top:300px; cursor:pointer; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s;}.button-left:hover {background:#777; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s;}</style>

這裏是一個網頁的鏈接：

http://alanvitek.com/dev

來源

2013-05-03 alanvitek

可以共享HTML也 – 2013-05-03 03:47:16

@ArunPJohny我已經包括了代碼和網站 – alanvitek 2013-05-03 04:02:45

嘗試

jQuery(function($){ 
    var sec = $('.portfolioSection'), secwidth = sec.width(), unit = 1040; 

    $(".button-right").click(function() { 
     var left = sec.css('left'); 
     left = Math.abs(parseInt(left.substring(0, left.length - 2))) 
     if(left + unit >= secwidth){ 
      $(this).hide() 
     } 

     sec.animate({left: "-=" + unit }, "slow"); 
     $(".button-left").show(); 
    }); 


    $(".button-left").click(function() { 
     var left = sec.css('left'); 
     if(left == '-' + unit + 'px'){ 
      $(this).hide() 
     } 
     sec.animate({left: "+=" + unit }, "slow"); 
     $(".button-right").show(); 
    }); 
})

演示：Fiddle

來源

2013-05-03 04:16:09

感謝您的鏈接！這絕對是正確的。我將插入值並使其工作。再次感謝 – alanvitek 2013-05-03 04:21:12

嘗試設置變量fo你的幻燈片（可能在一個數組中），然後檢查它是否是第一個幻燈片，隱藏左邊的按鈕。如果是最後一個，則隱藏右側按鈕。

$('.button-left').hide()

來源

2013-05-03 04:07:39 yvonnezoe

設置與狀態的變量。 1是第一張幻燈片，2是第二張幻燈片等等。在每一個按鍵加1或減1後，你就可以做到以下幾點：

if(variable == 1)$('.button-left').hide()

來源

2013-05-03 04:23:21

jQuery - 刪除下一個，從滑塊上一個按鈕

回答

相關問題