(Javascript）幻灯片不起作用

(Javascript) SlideShow Not Working

本文关键字：不起作用 幻灯片 Javascript      更新时间：2023-09-26

各位stackoverflow成员你好，我一直在尝试制作幻灯片。我已经引用了许多其他网站，包括这个网站，但图片没有显示在容器元素中，"上一个"和"下一个"按钮也没有正常运行。如果我得到帮助，我将不胜感激！:)

我的代码：

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共享按钮并不重要，我至少可以做到这一点。主要问题是图片没有显示，后退和前进按钮搞砸了：'（

p.s（我不确定部分原因是否是我如何使用div标签链接到"下一个"或"后退"功能，因为我就是这样做的：

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

好的...总结一下...

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>
相关文章：