Question

我在网站上有两个滑块。第一张幻灯片工作正常，但第二张幻灯片在“向右滑动”按钮上出现错误。我已经使用代码的视觉差异检查了代码，并且两张幻灯片之间没有区别（除了组件名称）。

我在这里制作了代码的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();
});

});

不幸的是，小提琴根本不起作用，我不知道为什么。我对js很新，我很难调试它。

有人可以查看代码并帮我找出错误吗？

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

Answer 1

你应该包含jQuery库。从JSfiddle左侧的下拉列表中试试这个。它工作正常。

您可以使用浏览器中提供的开发者控制台调试和查找错误。

chrome浏览器中有调试器，请参考Chrome Javascript debugger

您可以参考各种调试技巧 Advanced JavaScript Debugging Techniques

Answer 2

两个滑块之间没有区别，除了你有三个li个对象，左边有一个图像，而右边的只有两个。

由于滑块上有一个固定的宽度，因此仅使用两个图像就可以解决这个问题。您通过另一个图像扩展滑块，克隆第一个子项，附加它，然后在动画完成后将其删除。

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

Javascript：无法在幻灯片中找到错误

2 个答案: