0

我正在尝试从 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>
4

4 回答 4

0

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

于 2012-12-05T04:35:02.200 回答
0

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

imgs[i].onclick=NextSlide;
于 2012-12-05T04:36:04.733 回答
0

您好，您的脚本非常好...

问题出在这个函数的两行

    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 Demo 路径为http://jsfiddle.net/naveenksh/Jvkcc/5/

于 2012-12-05T05:26:13.323 回答
0

我的简单幻灯片版本：

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

（一个更聪明的例子。）

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;
        }
    }
});​
于 2012-12-05T07:27:53.163 回答