Jquery:用导航箭头和圆圈按钮创建滑雪板

Question

我正在尝试创建一个滑块，在最后一个幻灯片停止一次，在开始时停止一次，但它继续前进。请帮帮忙。

有关演示，请参阅上面的示例链接。

示例：http://jsfiddle.net/c2mKp/

HTML：

<!-- Jquery Slider -->
 <div class="jquery-slider">
        <div class="wrap">
            <div id="slider-1" class="slider">
                <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-1.jpg"/>
           </div>
           <div id="slider-2" class="slider">
               <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-2.jpg"/>
           </div>
           <div id="slider-3" class="slider">
               <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-3.jpg"/>
           </div>
           <div id="slider-4" class="slider">
               <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-4.jpg"/>
           </div>
       </div>
    </div>
<!-- Jquery Slider Buttons/CTA/Copy Overlay -->
<div class="slider-overlays">
    <div class="jquery-slider-btns">
        <img src="http://www.camprefugeinc.org/test/btn/prev-btn.png" class="button-prev prev btns">
        <img src="http://www.camprefugeinc.org/test/btn/next-hover-btn.png" class="button-next cursor next btns">
    </div>
    <div class="slider-text-overlay" id="text-overlay-1">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta">
            <div class="cta-text">LEARN MORE</div>
            <img src="http://www.camprefugeinc.org/test/btn/jquery-cta-btn.png">
        </div>
    </div>
    <div class="slider-text-overlay" id="text-overlay-2" style="display:none;">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta"></div>
    </div>
    <div class="slider-text-overlay" id="text-overlay-3" style="display:none;">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta"></div>
    </div>
    <div class="slider-text-overlay" id="text-overlay-4" style="display:none;">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta"></div>
    </div>
    <div class="jquery-slider-nav-circles"></div>
    <div class="clear-left"></div>
</div>

JQUERY：

// JavaScript Document
$(document).ready(function(){

    //Slider Animation
    $('.button-next').click(function(){  


        //Animate the images to next slide
        $('.slider').animate({"left": "-=865"}, 500);   

    });
    $('.button-prev').click(function(){ 

            //Animate the image to previous slide
            $('.slider').animate({"left": "+=865"}, 500);

    });


});

CSS：

/* Jquery Slider */
 .jquery-slider {
    height: 285px;
    width:865px;
    position: absolute;
    z-index: 1;
    overflow: hidden;
}
.slider-text-overlay {
    width:439px;
    float:left;
    position:absolute;
    z-index:3;
    margin-top:108px;
    margin-left:82px;
    color:#FFFFFF;
    font-size:15pt;
}
.text-bgcolor {
    display:inline;
    background-color:#000000;
    color:#fff;
    padding:2px 5px 5px 0px;
    line-height:18pt;
}
.jquery-slider-btns {
    width:82px;
    float:left;
    position:absolute;
    z-index:3;
    margin-top:112px;
}
.jquery-slider-cta {
    padding: 20px 0px 0px 174px;
}
.cta-text {
    position:absolute;
    z-index:3;
    text-transform:uppercase;
    font-size: 9pt;
    width:105px;
    text-align:center;
    padding-top:8px;
}
.jquery-slider-nav-circles {
    width: 231px;
    padding-left:113px;
    float:left;
    position:absolute;
    z-index:3;
    margin-top:261px;
}
.slider {
    width:865px;
    float:left;
    position:relative;
}
.slider-overlays {
    width:865px;
    position:absolute;
    z-index:2;
}
.next {
    margin-left:-5px;
}
.cursor {
    cursor:pointer;
}
.wrap {
    width: 3460px;
}

Answer 1

现在，您只是告诉幻灯片根据用户单击的按钮向左或向右移动x像素。一种方法是设置一个条件来检查用户是否试图超出滑块的边界。

JSFiddle：链接

首先，让我们创建一个变量来表示我们正在查看的幻灯片。

var slider = 0; // our default slide when we load the page

现在，假设我们单击以向右移动：

if(slider != $("[id^=slider]").length - 1) {

滑块= 0。$("id^=slider")获取id以“滑块”开头的所有元素。使用.length，我们获得由$("id^=slider")返回的数组的长度。幻灯片编号为0，1，2，3。减去1，因为我们从0开始。我们有4张幻灯片-- 1，也就是3。如果我们点击3，我们就不会再给滑块动画了。

左边呢？嗯：

if(slider != 0) { // Simple, we don't go below 0, our first slide.

现在，在JSFiddle中，您将看到在我们动画幻灯片以跟踪我们所在的位置之后，添加或减去一个滑块。你可以亲自检查一下，看看它在起作用。

另一种方法是跟踪这一位置，这一点让我难以解释。您只需使用$("id^=slider").length *数量的动画像素，以确保如果您再添加更多的幻灯片，您将不需要重新计算的最大像素数之前，用户到达边界。

Answer 2

如果div已经移动到您想要的最大值，则需要在动画之前检查位置，而不是动画。

我将其添加到小提琴中的单击next按钮中。

    var position = $('.slider').position();    

    var moveLeft = position.left;

    alert(moveLeft);//testing

    if(moveLeft > -2595){
    //Animate the images to next slide
        $('.slider').animate({"left": "-=865"}, 500);   
    }

只需将相同的代码添加到您的另一个按钮，但反转逻辑。