如何使用JavaScript使下一个按钮工作并转到另一个图像

我很难让我的下一个按钮工作.在点击下一步按钮,我需要的图像切换到下一个.有三个图像.我不确定是我的脚本代码放在了错误的位置,还是图像的位置不起作用.以下是我的代码:

选择 | 换行 | 行号
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Lab 5, Part 2</title>
  5. <meta charset = "utf-8" />
  6. <script type = "text/javascript">
  7. var curPic = 0;
  8. var cPic = [
  9.     'http://weblab.kennesaw.edu/seeds/lettuce.gif',
  10.     'http://weblab.kennesaw.edu/seeds/tomato.gif',
  11.     'http://weblab.kennesaw.edu/seeds/carrot.gif'
  12. ];
  13.  
  14. function vegeTables(direction) {
  15.     if (direction == 'next') {
  16.         curPic++;
  17.  
  18.         if (curPic == 3) {
  19.             curPic = 0;
  20.         }
  21.     } else {
  22.         curPic--;
  23.     }
  24.  
  25.     document.images[0].src = cPic[curPic];
  26. }
  27. </script>
  28.  
  29. <style type = "text/css" >
  30.   .vegetable1  {position: absolute; top: 120px; left: 39%;
  31.                z-index: 0;}
  32.   .vegetable2  {position: absolute; top: 120px; left: 39%;
  33.                z-index: 0;}
  34.   .vegetable3  {position: absolute; top: 120px; left: 39%;
  35.                z-index: 0;}
  36.   div.bottom    { height:20px;
  37.     width:100%;
  38.     margin: auto;
  39.     position: absolute;
  40.     top: 550px;
  41.     left: 47%;}
  42.   #veggie1 , #veggie2 , #veggie3 {display: inline-block;}
  43. </style>
  44. </head>
  45. <body>
  46.   <p>
  47.    <img class = "vegetable1"  id = "veggie1"
  48.         src = "/seeds/lettuce.gif"
  49.         alt = "picture of vegetable1" />
  50.    <img class = "vegetable2"  id = "veggie2"
  51.         src = "/seeds/tomato.gif"
  52.         alt = "picture of vegetable2" />
  53.    <img class = "vegetable3"  id = "veggie3"
  54.         src = "/seeds/carrot.gif"
  55.         alt = "picture of vegetable3" />
  56. </p>
  57.  
  58.  <div class = "bottom">
  59.   <input id = "clickme" type = "button" value = "Next"  onclick = "vegeTables('next');" />
  60. </div>
  61.  
  62. </body>
  63. </html>
# 回答1


基本上它是工作的--但你应该看看你的文档正文中的3个img标签.去掉第二个和第三个,然后你会看到你改变的img.您只需设置其中一个img的src--因此其他两个只需将其重叠.
# 回答2


替代您的代码,以允许向前/向后移动.(取消对上一页按钮的注释)
CurPic的逻辑为了更多的图片做了一些改变(如果需要的话).

选择 | 换行 | 行号
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <title>Lab 5, Part 2</title>
  5.     <meta charset = "utf-8" />
  6.  
  7.     <script type = "text/javascript">
  8.     var curPic = 0;
  9.     var cPic = [
  10.         'http://weblab.kennesaw.edu/seeds/lettuce.gif',
  11.         'http://weblab.kennesaw.edu/seeds/tomato.gif',
  12.         'http://weblab.kennesaw.edu/seeds/carrot.gif'
  13.     ];
  14.     function vegeTables(direction) {
  15.         if (direction == 'next') { curPic++; } else { curPic--; }
  16.         if (curPic < 0) { curPic = 2; }
  17.         if (curPic > cPic.length-1) { curPic = 0; }
  18.         document.images[0].src = cPic[curPic];
  19.     }
  20.     </script>
  21.  
  22.     <style type = "text/css" >
  23.       .vegetable1  { position: absolute; top: 120px; left: 39%; z-index: 0;}
  24.       div.bottom    { height:20px; width:100%;  margin: auto; 
  25.                       position: absolute; top: 550px; left: 47%;} 
  26. /*      #veggie1 , #veggie2 , #veggie3 { display: inline-block;} */
  27.     </style>
  28.     </head>
  29.     <body>
  30.      <p>
  31.       <img class = "vegetable1"  id = "veggie1" src = "http://weblab.kennesaw.edu/seeds/lettuce.gif" />
  32.      </p>
  33.      <div class = "bottom">
  34.       <input id = "clickmeN" type = "button" value = "Next"  onclick = "vegeTables('next');" />
  35. <!--      <input id = "clickmeP" type = "button" value = "Prev"  onclick = "vegeTables('prev');" /> -->
  36.      </div>
  37.     </body>
  38.     </html>

标签: Javascript

添加新评论