Javascript：在幻灯片中找不到错误

Posted 2023-05-08

【中文标题】Javascript：在幻灯片中找不到错误

【英文标题】：Javascript: cannot find the bug on a slideshow

【发布时间】：2014-06-13 20:15:18

【问题描述】：

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

我在这里做了一个代码的 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 很陌生，我很难调试它。

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

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

【问题讨论】：

你的小提琴错过了jquery库jsfiddle.net/sfcRJ/1

你没有包含 jQuery see this

您应该从 JSfiddle 左侧的下拉列表中包含 jquery 库。它工作正常。

你想让它处理两个图像吗？或者我的回答对你来说足够了吗？

我真是瞎了眼。我在幻灯片上苦苦挣扎，以至于我完全忘记了 jQuery。但主要问题仍然存在。正如@Niklas 指出的那样，为什么幻灯片不能只使用两张幻灯片？

【参考方案1】：

这两个滑块之间没有区别，只是您有三个 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

【讨论】：

这让我很困惑。为什么不能只使用两张幻灯片？正确的只需要两个。如何修复它以与两个一起使用？

Niklas 你拯救了我的一天，非常感谢。你能给我推荐一个资源来学习你所做的事情吗？我有一个巨大的差距，我需要填补它。

过去两年我学到的方法是在 Web 项目中使用 jQuery。但我想说最快的学习方式是帮助他人，就像在 *** 上一样。试着每隔一天回答一次关于 jQuery 的问题，你会比你想象的学得更快。另外，看看这个问题：***.com/questions/27242/…

【参考方案2】：

你应该包含 jQuery 库。从 JSfiddle 左侧可用的下拉列表中尝试此操作。它工作正常。

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

chrome浏览器自带调试器，请参考Chrome javascript debugger

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

【讨论】：

这些都是很棒的 cmets，但它们不是答案。