如何使用JavaScript使下一个按钮工作并转到另一个图像
我很难让我的下一个按钮工作.在点击下一步按钮,我需要的图像切换到下一个.有三个图像.我不确定是我的脚本代码放在了错误的位置,还是图像的位置不起作用.以下是我的代码:
选择 | 换行 | 行号
- <!DOCTYPE html>
- <html>
- <head>
- <title>Lab 5, Part 2</title>
- <meta charset = "utf-8" />
- <script type = "text/javascript">
- var curPic = 0;
- var cPic = [
- 'http://weblab.kennesaw.edu/seeds/lettuce.gif',
- 'http://weblab.kennesaw.edu/seeds/tomato.gif',
- 'http://weblab.kennesaw.edu/seeds/carrot.gif'
- ];
- function vegeTables(direction) {
- if (direction == 'next') {
- curPic++;
- if (curPic == 3) {
- curPic = 0;
- }
- } else {
- curPic--;
- }
- document.images[0].src = cPic[curPic];
- }
- </script>
- <style type = "text/css" >
- .vegetable1 {position: absolute; top: 120px; left: 39%;
- z-index: 0;}
- .vegetable2 {position: absolute; top: 120px; left: 39%;
- z-index: 0;}
- .vegetable3 {position: absolute; top: 120px; left: 39%;
- z-index: 0;}
- div.bottom { height:20px;
- width:100%;
- margin: auto;
- position: absolute;
- top: 550px;
- left: 47%;}
- #veggie1 , #veggie2 , #veggie3 {display: inline-block;}
- </style>
- </head>
- <body>
- <p>
- <img class = "vegetable1" id = "veggie1"
- src = "/seeds/lettuce.gif"
- alt = "picture of vegetable1" />
- <img class = "vegetable2" id = "veggie2"
- src = "/seeds/tomato.gif"
- alt = "picture of vegetable2" />
- <img class = "vegetable3" id = "veggie3"
- src = "/seeds/carrot.gif"
- alt = "picture of vegetable3" />
- </p>
- <div class = "bottom">
- <input id = "clickme" type = "button" value = "Next" onclick = "vegeTables('next');" />
- </div>
- </body>
- </html>