Javascript:找不到幻灯片上的错误

Question

我在一个网站上有两个 slider 。第一张幻灯片工作正常，但第二张幻灯片在“向右滑动”按钮上出现错误。即使通过代码的视觉差异，我也检查了代码，两张幻灯片之间没有区别(除了组件名称)。

我在这里制作了一个 JSfiddle 代码:http://jsfiddle.net/sfcRJ/编辑:缺少 jquery，这有效:http://jsfiddle.net/sfcRJ/1/

这是第一张幻灯片的JS:

jQuery(document).ready(function ($) {

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({
    width: slideWidth,
    height: slideHeight
});

$('#slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
});

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: +slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: -slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

});

这是第二张幻灯片的JS:

jQuery(document).ready(function ($) {

var slideCount = $('#profes ul li').length;
var slideWidth = $('#profes ul li').width();
var slideHeight = $('#profes ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#profes').css({
    width: slideWidth,
    height: slideHeight
});

$('#profes ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
});

$('#profes ul li:last-child').prependTo('#profes ul');

function moveLeft() {
    $('#profes ul').animate({
        left: +slideWidth
    }, 200, function () {
        $('#profes ul li:last-child').prependTo('#profes ul');
        $('#profes ul').css('left', '');
    });
};

function moveRight() {
    $('#profes ul').animate({
        left: -slideWidth
    }, 200, function () {
        $('#profes ul li:first-child').appendTo('#profes ul');
        $('#profes ul').css('left', '');
    });
};

$('a.ctrl_prev').click(function () {
    moveLeft();
});

$('a.ctrl_next').click(function () {
    moveRight();
});

});

不幸的是， fiddle 根本不起作用，我不知道为什么。我对 js 很陌生，很难调试它。

有人可以看一下代码并帮我找出问题所在吗？

编辑:幻灯片放映似乎适用于三张幻灯片，但不适用于两张幻灯片。查看代码，我无法找到这种行为的原因，特别是因为右侧的幻灯片与上一个按钮一起使用，但不适用于右键。为什么会这样？

Answer 1

这两个 slider 之间没有区别，只是您有三个 li 对象，左边一个有图像，右边只有两个。

由于您的 slider 宽度固定，因此让它只处理两个图像有点困难。你用另一个图像加宽 slider ，克隆第一个 child ，附加它，然后在动画完成后将其删除。

function moveRight1() {
    if (slideCount1==2) {
        $('#profes ul').css('width', sliderUlWidth1+slideWidth1);
        $('#profes ul li:first-child').clone().appendTo('#profes ul');
    }
    $('#profes ul').animate({
        left: -slideWidth1
    }, 200, function () {
        if (slideCount1==2) $('#profes ul li:last-child').remove();
        $('#profes ul li:first-child').appendTo('#profes ul');
        $('#profes ul').css('left', '');
    });
};

Here's a demo