jQuery - 从滑块中删除下一个，上一个按钮答案

【问题标题】：jQuery - Remove Next, Prev Buttons from SliderjQuery - 从滑块中删除下一个，上一个按钮
【发布时间】：2013-05-03 12:23:21
【问题描述】：

我尝试搜索此内容，但找不到直接相关的内容。我是 jQuery/Javascript 的新手，所以任何帮助都将不胜感激！谢谢！

我有一个自定义滑块，可以在其中使用 3 张幻灯片，并且我正在使用 jQuery 在幻灯片之间来回切换。每张幻灯片的宽度为 1040 像素。每张幻灯片都是相对定位的，并且是向左浮动的。

我想在我的滑块位于开头时隐藏我的“button-right”（这样您就不会滚动到空白区域），并在我的滑块位于末尾时隐藏我的“button-left”（再次，因此您不会滚动到空白区域）。

我可以使用什么逻辑来做到这一点？

$(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

【问题讨论】：

能不能也分享一下html
@ArunPJohny 我已经包含了代码和网站链接

标签： jquery slider

【解决方案1】：

试试

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

【讨论】：

谢谢！这绝对是在正确的轨道上。我将插入这些值并让它工作。再次感谢

【解决方案2】：

尝试为你的幻灯片设置一个变量（可能在一个数组中），然后检查它是否是第一个，隐藏左键。如果是最后一个，隐藏右键。

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

【讨论】：

【解决方案3】：

设置一个带有状态的变量。 1 是第一张幻灯片，2 是第二张幻灯片，依此类推。每次按键加1或减1。之后，您可以执行以下操作：

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

【讨论】：