Question

Hello stackoverflow成员，我一直试图制作幻灯片。我引用了许多其他网站，包括这个网站，但图片并没有出现在容器元素中，也没有＃34; prev＆＃34;和＆＃34; next＆＃34;按钮功能正常。如果我得到帮助，我会很感激！：）

我的代码：

var photos = newArray ();
    photos[0] = "img/image(2).jpg";
    photos[1] =  "img/image(4).jpg";
    photos[2] = "img/image(6).jpg";
    photos[3] = "img/image(8).jpg";
    photos[4] = "img/image(10).jpg";
    photos[5] = "img/image(12).jpg";
    photos[6] = "img/image(14).jpg";
    photos[7] = "img/image(16).jpg";
    photos[8] = "img/image(18).jpg";
    photos[9] = "img/image(20).jpg";
    photos[10] = "img/image(22).jpg";
    photos[11] = "img/image(24).jpg"
    //END OF PHOTOS ARRAY//
var i = 0;
var k = photos.length-1;
function next.onclick() {
var img= document.getElementById("image-container");
img.src = photos[i];
if (i < k ) {
    i++;
}else {
i = 0; }

} 
function prev.onclick() {
var img= document.getElementById("image-container");
img.src=photos[i];
if)i > 0) {i--;}
else {i = k; }
}
getImageArray = function(containerId) {
    var containerElement = document.getElementById(container);
    if (containerElement) {
        var imageArray = containerElement.getElementById("container");
        return photos[i];
    } else {
        return null;
    }
}

这就是我的幻灯片显示的样子（它被打破了） http://prntscr.com/5dcfzq 分享按钮并不重要，我至少可以做到这一点。主要问题是图片没有显示，后面和前面的按钮搞砸了：＆＃39;（

ps（我不确定部分原因是我如何使用div标签链接到＆＃34; next＆＃34;或＆＃34; back＆＃34;功能因为我是这样做的：

<div id = "back" onclick = "prev()"></div>

Answer 1

好的......总结......

1。 var photos = newArray ();

new和Array之间需要有空格，所以......

var photos = new Array（）;

2。 function prev.onclick() {必须只是function prev() {

3。根据HTML中的使用情况与next.onclick()相同。

4。在prev() ... if)i > 0) {i--;}应该是......

if (i > 0) { i--; }

5。 错误：同样在prev()' ... else should be i = k-1;`

6。 不需要不确定为什么你有getImageArray功能。

7。这假设HTML中有一个''标记。

<强>更新：

这是有效的代码......这一切都在身体中：

这些是我对身体的假设......

<img id="image-container" />
<div id="back" onclick="prev()">Previous</div>
<div id="next" onclick="mext()">Next</div>

脚本代码必须位于正文的末尾......

<script>
    var photos = new Array ();
        photos[0] = "img/image(2).jpg";
        photos[1] =  "img/image(4).jpg";
        photos[2] = "img/image(6).jpg";
        photos[3] = "img/image(8).jpg";
        photos[4] = "img/image(10).jpg";
        photos[5] = "img/image(12).jpg";
        photos[6] = "img/image(14).jpg";
        photos[7] = "img/image(16).jpg";
        photos[8] = "img/image(18).jpg";
        photos[9] = "img/image(20).jpg";
        photos[10] = "img/image(22).jpg";
        photos[11] = "img/image(24).jpg"
        //END OF PHOTOS ARRAY//

    // Here, I set the img variable so that it can be re-used.
    // I also loaded the first image ...
    var i = 0;
    var k = photos.length-1;
    var img = document.getElementById("image-container");
    img.src = photos[i];

    function next() {
        img.src = photos[i];
        if (i<k) {
            i++;
        } else {
            i = 0;
        }
    } 
    function prev() {
        img.src=photos[i];
        if (i>0) {
            i--;
        } else {
            i = k;
        }
    }
</script>

（Javascript）幻灯片不工作

1 个答案: