Question

我创建了一个包含多张幻灯片的水平滑块，我已将其设置为通过单击导航栏箭头，滑块向左移动，以便下一张幻灯片占据屏幕。滑块的总宽度为500％，它包含5个滑块，每个滑块的宽度为20％。代码如下所示：

$('.arrow-next').click(function() {

$(".slider").animate({marginLeft: "-=100%",}, 600);

});


$('.arrow-prev').click(function() {

$(".slider").animate({marginLeft: "+=100%",}, 600);

});

现在我想要实现的目标是：

滑块滑到其原始位置，0到达终点后。
在第一张幻灯片或第0张位置时不要向右滑动。

我知道它是一个非常简单的代码，并且有不同的（可能更有效的）方法来编码水平滑块，但我刚刚开始编码，这是我＆＃39的唯一方式; ve成功地使它发挥作用。

Answer 1

这是我的最后一次尝试，需要七个div，但一次只能显示五个，最好能想出来：

$('.arrow-next').click(function() {
    $(".slider").animate({left: "-=25px"}, 600, function(){
        var left = $(this).css('left');
        $(this).css('left', left == "0px" ? "175px" : left);
    });   
});

$('.arrow-prev').click(function() {
    $(".slider").animate({left: "+=25px"}, 600, function(){
        var left = $(this).css('left');
        $(this).css('left', left == "200px" ? "25px" : left);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 150px">
    <button type="button" class="arrow-prev">></button>
    <br>
        <div style="display: inline-block; width: inherit; overflow: hidden;">
    <div id="before" style="position: absolute; left: 0px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
    <div style="position: absolute; left: 25px; height: 25px; width: 25px; background-color:red; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 50px; height: 25px; width: 25px; background-color:purple; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 75px; height: 25px; width: 25px; background-color:blue; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 100px; height: 25px; width: 25px; background-color:green; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 125px; height: 25px; width: 25px; background-color:greenyellow; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 150px; height: 25px; width: 25px; background-color:yellow; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 175px; height: 25px; width: 25px; background-color:orange; vertical-align:middle;" class="slider"></div>
    <div id="after" style="position: absolute; left: 175px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
        </div>
    <br>
    <br>
    <br>    <button type="button" class="arrow-next" style="display:inline-block">
        <</button>
</div>

Answer 2

我就是这样做的。如果您需要任何解释，请告诉我。

＆＃13;

$.fn.createSlider = function(options){
    var container = $(options.container, this),
        slides = $(options.slides, this),
        total = slides.length,
        pos = 0,
        animating = false;

    container.width(total + '00%');
    slides.width(100 / total + '%');
    $(options.arrowLeft, this).click(previousSlide);
    $(options.arrowRight, this).click(nextSlide);
    
    function previousSlide(){
        if(!pos || animating) return;
        pos--;
        moveSliderTo(pos);
    }
    
    function nextSlide(){
        if(animating) return;
        pos++;
        if(pos == total)  pos = 0;
        moveSliderTo(pos);
    }
    
    function moveSliderTo(n){
        animating = true;
        container.animate({left: '-' + n + '00%'}, options.duration, function(){
            animating = false;
        });
    }
};

$('.slider').createSlider({
    'container' : '.slides',
    'slides' : '.slides li',
    'arrowLeft' : '.arrow-prev',
    'arrowRight' : '.arrow-next',
    'duration' : 600
});

＆＃13;

.slider{
    width: 65%;
    padding-top: 27.22%;
    overflow: hidden;
    margin: 1em auto;
    position: relative;
}

.slides{
    list-style:none;
    position: absolute;
    top: 0;
    left: 0;
}

.slides li{
    float: left;
}

.slides li img{
    width: 100%;
}

.arrow-prev, .arrow-next{
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: rgba(255,255,255,.5);
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-size: 25px;
    font-weight: bold;
    line-height: 170px;
    text-align: center;
    cursor: pointer;
}

.arrow-prev:hover, .arrow-next:hover{
    background: #fff;
}

.arrow-next{
    left: 100%;
    margin-left: -30px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="slider">
    <ul class="slides">
        <li><img src="http://i62.tinypic.com/2088l0l.jpg"/></li>
        <li><img src="http://i58.tinypic.com/2rfv4b6.jpg"/></li>
        <li><img src="http://i62.tinypic.com/9a7nk4.jpg"/></li>
        <li><img src="http://i59.tinypic.com/o7k7cw.jpg"/></li>
    </ul>
    
    <div class="arrow-prev">&lt;</div>
    <div class="arrow-next">&gt;</div>
</div>

＆＃13;

滑块滑回原位

2 个答案: