Question

我需要帮助找出我的脚本出错的地方。我没有具体理解我想要做什么来让我的循环和数组工作。我根本不遵守这些指示。

说明： 以三种不同方式显示图像的网页：自行车横幅，随机图像显示和幻灯片放映。在脚本部分中，创建以下功能：

cycle（）：
的select（）：
doBack（）：
doNext（）：
startup（）：调用cycle（）和select（）函数。

我的尝试：

    <script type="text/javascript">
        var imageArray  = new Array("lions.gif", "tigers.gif", "bears.gif", "ohmy.gif") ;
        var cycleIndex  = 0
          , randomIndex = 0
          , slideIndex  = 0
          , pictureIndex= 0
          ;
        //startup ()
        function cycle(cycleIndex)  {   
        cycleIndex++;
        if (cycleIndex == imageArray.length) {
        cycleIndex = 0;
        }
        document.getElementById("cycleBanner").src = imageArray[cycleIndex];

        {
            imageArray[0] = new Image() ; imageArray[0].src = "lions.gif"   ;
            imageArray[1] = new Image() ; imageArray[1].src = "tigers.gif"  ;
            imageArray[2] = new Image() ; imageArray[2].src = "bears.gif"   ;
            imageArray[3] = new Image() ; imageArray[3].src = "ohmy.gif"    ;
        // TODO: initialize the other three images in the array (indexes 1, 2, and 3)

            cycle () ;  // start the cycling banner
            select() ;  // start the random banner

            return ;
        }

        function cycle()
        {
        // TODO: set the source of the displayed cycling banner image to the 
        // next image in the image array - watch for 'wrap around'

        document.cycleBanner.src - imageArray[cycleIndex].src ;

        cycleIndex++ ;{
            setTimeout("cycle()",2000) ;  // refresh after 2 seconds
        }
            return ;
        }

        function select()
        {
        // TODO: set the source of the displayed random banner image to a 
        // random image in the image array

        function myFunction() {
        var x = Math.floor((Math.random() * 4) + 1);
        document.getElementById("ClickMe").innerHTML = x;
        }

        randomIndex++ ;
            setTimeout("select()",1000) ;

            return ;
        }

        function doBack()
        {
        // TODO: set the source of the displayed slide show image to the  
        // previous image in the image array, if there is one - if not, stay put


            return ;
        }

        function doNext()
        {
        // TODO: set the source of the displayed slide show image to the  
        // next image in the image array, if there is one - if not, stay put


            return ;
        }
    </script>

Answer 1

这是我为你准备的一个非常艰难的开始。我的想法是，您将拥有一个图像<img id="cycleBanner" src="" alt="">，其中源将根据源列表进行更新。 init()没有必要，但我想的更多的是一个级别，这不是一个坏主意。您可以将其中一些合并到一个函数中，并使用参数进行更多条件处理。防爆。 cycle(direction)方向为"prev" or "next"。希望这有帮助！

var imageSources = ["lions.gif", "tigers.gif", "bears.gif", "ohmy.gif"],
    imageIndex = 0,
    cycleTimer = null,
    imageElement = document.getElementById("cycleBanner");

//Inits the element to be the first image of our sources
function init(){
    imageElement.src = imageSources[0];
    updateImageElement();
}

//Updates the image element to be the source of the current index
function updateImageElement() {
    imageElement.src = imageSources[imageIndex];
}

//Updates the image element to the next source. If the index is out of bounds, it loops back to the beginning.
function nextImage(){
    if(imageIndex + 1 > imageSources.length){
        imageIndex = 0;
    } else {
        imageIndex++;
    }

    updateImageElement();
}

//Updates the image element to the prev source. If the index is out of bounds, it loops back to the end.
function prevImage() {
    if(imageIndex - 1 < 0){
        imageIndex = imageSources.length - 1;
    } else {
        imageIndex--;
    }

    updateImageElement();
}

function randomImage(){
    imageIndex = Math.floor(Math.random() * imageSources.length);
    updateImageElement();
}

function cycleForward(){
    clearTimeout(cycleTimer);
    cycleTimer = setTimeout(nextImage(), 2000);
}

function cycleBackward(){
    clearTimeout(cycleTimer);
    cycleTimer = setTimeout(prevImage(), 2000);
}

以三种不同方式显示图像的网页：自行车横幅，随机图像显示和幻灯片放映

1 个答案: