Question

我正试图从2008年的24小时 Javascript书中制作幻灯片。我认为我已经复制了相同的代码，但图片随机播放，但它们不会像书一样滑入说他们应该。有没有人介意花时间看这个？提前谢谢！

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Slideshow</title> <style> img.slide { position: absolute; left:0; top:0; } #slideshow { position:relative; overflow:hidden; width:400px; height:400px; } </style> <script> // Slideshow // Global variables var numslides=0; var currentslide=0,oldslide=4; var x = 0; var slides = new Array(); function MakeSlideShow() { imgs=document.getElementsByTagName("img"); for (i=0; i<imgs.length; i++) { if (imgs[i].className != "slide") continue; slides[numslides]=imgs[i]; //Stack images with the first slide on top if (numslides==0) { imgs[i].style.zIndex=10; } else { imgs[i].style.zIndex=0; } imgs[i].onclick=NextSlide; numslides++; } // end for loop }// end MakeSlideShow function NextSlide() { //Set the current slide to be under the new top slide slides[currentslide].style.zIndex=9; // Move older slide to the bottom of the stack slides[oldslide].style.zIndex=0; oldslide = currentslide; currentslide++; if (currentslide >= numslides) currentslide = 0; // Start at the right edge slides[currentslide].style.left=400; x=400; //Move the new slide to the top slides[currentslide].style.zIndex=10; AnimateSlide(); } function AnimateSlide() { // Lower moves slower, higher moves faster x = x - 25; slides[currentslide].style.left=x; //Previous image moves off the left edge slides[oldslide].style.left=x-400; //Repeat until until the slide is at the zero position if (x > 0) window.setTimeout("AnimateSlide();",10); } </script> </head> <body onload="MakeSlideShow();"> <div id = "slideshow"> <img class = "slide" src = "pic1.jpg" width = "400px" height = "400px" > <img class = "slide" src = "pic2.jpg" width = "400px" height = "400px" > <img class = "slide" src = "pic3.jpg" width = "400px" height = "400px" > <img class = "slide" src = "pic4.jpg" width = "400px" height = "400px" > <img class = "slide" src = "pic5.jpg" width = "400px" height = "400px" > </div> </body> </html>

Answer 1

我认为问题在于您已将HTML代码嵌入到XML文档中。如果你摆脱页面顶部的<?xml version="1.0" encoding="UTF-8"?>，它应该得到修复。

Answer 2

它可以工作，它会在点击当前图像时滑动到下一个图像。代码中的第40行，

imgs[i].onclick=NextSlide;

Answer 3

嗨你的剧本非常好......

问题在于此功能的两行

    function AnimateSlide() {
    ...
    ...
    slides[currentslide].style.left=x;
    slides[oldslide].style.left=x-400;
    ...
    }

修改是左边的值应该有“px”。所以修改后的行是

slides[currentslide].style.left=x +"px";
slides[oldslide].style.left=x-400 +"px";

现在正在滑动。 jsfiddle演示路径为http://jsfiddle.net/naveenksh/Jvkcc/5/

Answer 4

我的简单幻灯片版本：

http://jsfiddle.net/rXkVG/11/

（A slightly more clever example。）

window.addEventListener('load', function load() {
    var slideshow = document.getElementById('slideshow'),
        imgs = slideshow.getElementsByTagName("img"),
        offset = 178,
        speed = 25,
        step = 10,
        animated = false,
        slides = [];

    SetupSlideShow();

    function SetupSlideShow() {
        var items = imgs.length,
            next = items,
            slide;

        while (next--) {
            slide = imgs[next];

            if (slide.className.indexOf("slide") != -1) {
                slides.push(slide);

                slide.style.zIndex = items - next;

                slide.addEventListener('click', Change);
            }
        }
    }

    function Change() {
        if (animated) {
            return;
        }

        Animate();
    }

    function Animate() {
        var slide = slides[slides.length - 1],
            left = 0;

        animated = true;

        slideshow.style.cursor = 'wait';
        slide.style.left = left;

        (function animate() {
            left = left - step;

            if (left > offset * -1) {
                slide.style.left = left + 'px';

                setTimeout(animate, 25);
            } else {
                animated = false;

                slideshow.style.cursor = 'pointer';

                Next();
            }
        })();
    }

    function Next() {
        var slide = slides.length;

        slides.unshift(slides.pop());

        while (slide--) {
            slides[slide].style.zIndex = slide;
            slides[slide].style.left = 0;
        }
    }
});

Javascript幻灯片不滑动

4 个答案: