Question

我正在为练习构建一个基本滑块。我得到了“下一个”幻灯片部分。但是，前一个不会设置左侧位置。

有人可以告诉我我做错了什么。谢谢！

$(document).ready(function() {
var imgWidth = $('.slidercontainer li').width(); 
var negPos = '-' + imgWidth 
var slideLi = $('li');
$('.slidercontainer li').hide(); 
$('.slidercontainer li:first').show(); 
var currentSlide = 0; 

$('.control a').click(function(){
    var direction = $(this).attr('class');
    if(direction === 'next'){

        slideLi.eq(currentSlide).animate({'left': negPos},function(){
            $(this).hide(); 
        });

        if(currentSlide >= slideLi.length - 1){
            slideLi.eq(0).css({'left':imgWidth}).show().animate({'left': 0}).eq(currentSlide).animate({'left': negPos});
            currentSlide = 0
        } else {
            slideLi.eq(currentSlide+1).css({'left':imgWidth}).show().animate({'left': 0});
            currentSlide = currentSlide+1
        }


    } else if (direction === 'prev'){

        slideLi.eq(currentSlide).animate({'left': imgWidth},function(){
            $(this).hide(); 
        });

        if(direction === 0){

        slideLi.eq(currentSlide - 1).css({'left': negPos}).show().animate({'left': 0});

        }
    }


});

}）;

Answer 1

这是更新的小提琴：http://jsfiddle.net/9ywbN/5/

重大更改仅在Javascript部分：

var imgWidth = $('.slidercontainer li').width();
var negPos = '-' + imgWidth + 'px';
var slideLi = $('li');
$('.slidercontainer li').hide();
$('.slidercontainer li:first').show();
var currentSlide = 0;

$('.control a').click(function () {
    var direction = $(this).attr('class');
    if (direction === 'next') {
        slideLi.eq(currentSlide).animate({
            'left': negPos
        }, function () {
            $(this).hide();
        });

        if (currentSlide >= slideLi.length - 1) {
            slideLi.eq(0).css({
                'left': imgWidth
            }).show().animate({
                'left': 0
            }).eq(currentSlide).animate({
                'left': negPos
            });
            currentSlide = 0;
        } else {
            slideLi.eq(currentSlide + 1).css({
                'left': imgWidth
            }).show().animate({
                'left': 0
            });
            currentSlide = currentSlide + 1;
        }
    }

    if (direction === 'prev') {
        slideLi.eq(currentSlide).animate({
            'left': imgWidth
        }, function () {
            $(this).hide();
        });

        if (currentSlide == 0) {
            slideLi.eq(slideLi.length - 1).css({
                'left': negPos
            }).show().animate({
                'left': 0
            });
            currentSlide = slideLi.length - 1;
        } else {
            slideLi.eq(currentSlide - 1).css({
                'left': negPos
            }).show().animate({
                'left': 0
            });
            currentSlide = currentSlide - 1;
        }
    }
});

你已经非常接近了。你只需要改变一些动画命令。

学习Jquery - 构建一个滑块，但上一张幻灯片不起作用

1 个答案: