javascript - 请帮助。使手动幻灯片可重复播放？

Question

请提供任何帮助的网页是:

http://weblink.computersforpeople.info/users/1/properties/518/images/2869

如何使其可重复，我的意思是当我单击最后一张照片上的下一个按钮时，它可以再次转到第一张照片。

之前也问过，但还是没能解决。有人可以帮忙吗？

非常感谢!!!

Answer 1

让我们尝试一下这个脚本，希望它能为您提供更多帮助。

<script language="javascript">
    var imageShow = document.getElementById("imageShow"),
        imageIndex = 0,
        isSlidePlay = false,
        img = document.createElement("img"),
        opacity = 0,
        buttonPlay = document.getElementById("btnPlay"),
        buttonPrevious = document.getElementById("btnPrevious"),
        buttonNext = document.getElementById("btnNext"),
        imgs = [
            "images/1.jpg",
            "images/2.jpg",
            "images/3.jpg",
            "images/4.jpg",
            "images/5.jpg",
            "images/6.jpg",
            "images/7.jpg",
            "images/8.jpg",
            "images/9.jpg",
            "images/10.jpg"
        ];

    img.src = imgs[imageIndex];
    img.width = 300;
    img.height = 400;
    img.opacity = opacity;
    imageShow.appendChild(img);

    function fadeIn() {
        img.style.opacity = opacity;
         fadeInInterval = setInterval(
            function() {
                opacity += 1;
                img.style.opacity = opacity/10;
                if (opacity/10 == 1) {
                    fadeOut();      
                    clearInterval(fadeInInterval);                      
                }
            },
            100
        );
    }

    function fadeOut(){         
        img.style.opacity = opacity;
         fadeOutInterval = setInterval(
            function() {
                opacity -= 1;
                img.style.opacity = opacity/10;
                if (opacity == 0) {                 
                    if (imageIndex >= imgs.length) imageIndex = 0;
                    imageIndex++;
                    img.src = imgs[imageIndex];
                    fadeIn();                       
                    clearInterval(fadeOutInterval);
                }
            },
            100
        );
    }

    buttonPlay.addEventListener("click", 
        function(){
            if(!isSlidePlay){
                buttonPlay.value="||";
                fadeIn();
                isSlidePlay = true;
                buttonNext.disabled = true;
            }
            else {
                buttonPlay.value = "Play";
                isSlidePlay = false;
                buttonNext.disabled = false;
                clearInterval(fadeInInterval);
                clearInterval(fadeOutInterval);
                img.src = imgs[imageIndex];
            }

        }, 
        false
    );

    buttonNext.addEventListener("click",
            function(){
                buttonPrevious.disabled = false;
                imageIndex++;
                img.src = imgs[imageIndex];
                if (imageIndex >= imgs.length) buttonNext.disabled = true;
            },
        false
    );

    buttonPrevious.addEventListener("click",
        function(){
            buttonNext.disabled = false;
            imageIndex--;
            img.src = imgs[imageIndex];
            if (imageIndex <= 0) buttonPrevious.disabled = true;
        },
        false
    );
</script>

注意:您可以自己创建按钮。