Question

我正在尝试创建一个在最后一张幻灯片处停止一次的滑块，并在开头时停止一次，但它会继续。请帮忙。

请参阅上面的示例链接以获取演示。

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：Link

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

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

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

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

因此，slider = 0. $（“[id ^ = slider]”）获取id以“slider”开头的所有元素。使用.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中，您会看到我们在幻灯片设置动画后添加或减去一个滑块以跟踪我们的位置。您可以自己检查一下，看看它的实际效果。

另一种方法是跟踪位置，jmm让我解释。您只需要使用$（“[id ^ = slider]”）。长度*动画像素数量，以确保如果您将来添加更多幻灯片，则无需重新计算最大像素数在用户触及边界之前进行动画处理。

Answer 2

您需要在制作动画之前检查位置，如果div已移动到您想要的最大值，则无需动画。

我已将此添加到此fiddle

中的点击下一步按钮

    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);   
    }

只需将相同的代码添加到您的其他代码中，但反转逻辑。

Jquery：使用导航箭头和圆形按钮创建滑块

2 个答案: