javascript - 基本幻灯片

Question

我正在用 JavaScript 和 jQuery 创建幻灯片以显示图像数组。

我的想法是在页面上放3个div:

• 一个有左键的
• 一个有右键的
• 一个称为屏幕的屏幕将显示图像。

这是我写的代码，但我不知道缺少什么。也许是 onload 事件？

var now =0;
var image_array= 
[
    "../cabinets/001.jpg",
    "../cabinets/002.jpg",
    "../cabinets/003.jpg"
];
$("#left").click(left(  if(now<image_array.length)
    {
        now++;
        $('#screen').css('background-image', 'url("' + array[now] + '")');
    }));
$("#right").click(  if(now>0)
    {
        now--;
        $('#screen').css('background-image', 'url("' + array[now] + '")');
    });

Answer 1

我重写了你的代码，结果如下:

1)您是否将 jQuery 库包含到您的元素中？

2) 在您的 jQuery 代码行中:

$('#screen').css('background-image', 'url("' + array[now] + '")');

你使用了错误的数组名称array[now]，你的数组是image_array，所以你必须将其重写为image_array[now]

3)您对.click 函数的定义不正确。您必须将其定义为:.click(function(){ ... });，因此您的行将如下所示:

// left click
$("#left").click(function(){
    if(now > 0){            
        now--;
    }
    $('#screen').css('background-image', 'url("' + image_array[now] + '")');alert(now);
});

和

// right click
$("#right").click(function(){
    if(now < image_array.length-1){
        now++;
    }
    $('#screen').css('background-image', 'url("' + image_array[now] + '")');alert(now);
});

这是有效的 JSFiddle 解决方案: JSFiddle

这是更新了 IF 项的第二个解决方案: JSFiddle