Question

我已经在循环函数中尝试了它，但它说该函数没有被使用所以我把它放在外面仍然无法工作，我不知道如何解决它，因为我认为这将工作，rmember第一天在javascript上，感谢提前的帮助，请不要jquery。

<html>
    <head>
        <style type="text/css">
            #PictureContainer {
                height: 300px;
                width: 500px;
                margin: 0 auto;
                overflow: hidden;
                display: inline-block;
            }

            #SliderWrapper {
                width: 628px;
                height: 300px;
                margin: 0 auto;
                overflow: hidden;
            }

            #image {
                height: 300px;
                width: 500px;
            }

            #Next {
                float: right;
            }

            #Before {
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="SliderWrapper">
            <a href="#" onclick="Forward(); return false;"><img id="Next" src="Forward.png" alt="Forward"></a>
            <a href="#" onclick="Back(); return false;"><img id="Before" src="Back.png" alt="Back"></a>
            <div id="PictureContainer">
                <img id="image" src="html.png" alt="HTML">
            </div>
        </div>

        <script language="javascript" type="text/javascript">

            var i = 1;

            function loop() {
                i = i+1;
                    if(i == 5){
                        i = 1;
                    }
                if (i == 1) {
                    document.getElementById('image').src = "html.png";
                } else if(i == 2) {
                    document.getElementById('image').src = "css3.png";
                } else if (i == 3) {
                    document.getElementById('image').src = "WebdevLogo's.jpg";
                } else {
                    document.getElementById('image').src = "WebdevLogo's.jpg";
                }


            }
                var pictureloop = setInterval(loop, 3000);

            function Forward() {
                if(i == 5) {
                    i = 1;
                } else {
                    i = i+1;
                }
            }

            function Back() {
                if(i == 1) {
                    i = 4;
                } else {
                    i = -1;
                }
            }

        </script>

    </body>
</html>

Answer 1

你有一个叫做循环的函数，但你永远不会调用它，因此它永远不会改变图像的source属性。在前进和后退功能中，最后添加对循环功能的调用。

我已经修复了Back（）内部的一些问题

    function Forward() {
            if(i == 5) {
                i = 1;
            } else {
                i++;
            }
            loop();
        }

        function Back() {
            if(i == 1) {
                i = 5;
            } else {
                i--;
            }
            loop();
        }

在loop（）函数中，考虑使用switch block而不是所有其他ifs。同样在循环函数中，使用increment运算符 - i ++; - 将值增加1，而不是手动语句i = i + 1;此外，if i == 5语句是多余的。您已在Forward功能中使用它。

Answer 2

这对https://codereview.stackexchange.com/来说更像一个问题，但这里有一些可以使代码更清晰的东西。

而不是复制图像设置代码，声明一个图像数组。

var images = ['img1.png','img2.png'];
var currentImage = 0;

function forward() {
  currentImage++;
  if (currentImage > images.length-1) currentImage == 0;
  setImage()
}

function setImage() {
  document.getElementById('image').src = images[currentImage];
}

setInterval(forward, 5000);

用户控件不适用于图像循环

2 个答案: