0

2008 年のJavascript in 24 Hoursという本からスライドショーを作成しようとしています。コードを同じようにコピーしたと思いますが、写真はシャッフルしますが、本が言うようにスライドしません。時間をかけてこれを見てくれる人はいますか？前もって感謝します！

<?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

こんにちはあなたのスクリプトはとても良いです...

問題はこの関数の 2 行にあります

    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/です。

于 2012-12-05T05:26:13.323 に答える
0

問題は、XML ドキュメント内に HTML コードを埋め込んでいることだと思います。<?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

シンプルなスライドショーの私のバージョン:

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 に答える