[英]jQuery - Remove Next, Prev Buttons from Slider
我嘗試搜索此內容,但找不到與之直接相關的內容。 我是jQuery / Java的新手,所以將不勝感激! 謝謝!
我有一個自定義滑塊,在功能上可以處理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>
這是頁面的鏈接:
嘗試為幻燈片設置一個變量(可能在數組中),然后檢查它是否為第一個變量,隱藏左按鈕。 如果是最后一個,則隱藏右鍵。
$('.button-left').hide()
嘗試
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();
});
})
演示: 小提琴
設置狀態變量。 1是第一張幻燈片,2是第二張幻燈片,依此類推。 在每個鍵上按加1或減1。之后,您可以執行以下操作:
if(variable == 1)$('.button-left').hide()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.