1

我正在尝试通过 javascript 制作一个 8 图像按钮旋转器，我有按钮 "<" ">" "<<" ">>" 和一个复选框图像旋转器。到目前为止，我可以发送我的代码和屏幕截图，有人可以帮忙吗？这是我的代码。

<div id="images">
  <img src="images/sample1.jpg" id="image"/>
</div>
<div id="buttonContainer">
  <button id="firstImageButton" title="Click to view the first image." onClick="previousImage("image")">&laquo;</button>
  <button id="previousImageButton" title="Click to view the previous image." >&lt;</button>
  <button id="nextImageButton" title="Click to view the next image." >&gt;</button>
  <button id="lastImageButton" title="Click to view the last image." onClick="images/sample8.jpg">&raquo;</button>
  <br/><input type="checkbox" id="autoRotate" /><label for="autoRotate">Click to auto-rotate</label>
</div>
</div>
</div>

脚本

<script>
  var images = [ "images/sample1.jpg", "images/sample2.jpg", "images/sample3.jpg", "images/sample4.jpg", "images/sample5.jpg", "images/sample6.jpg", "images/sample7.jpg", "images/sample8.jpg" ]
  var currentImageIndex = 0;
  var currentImage = 0;

  function nextImageButton() {
    currentImage += 1;
    displayImage(currentImage);
  }

  function previousImageButton() {
    currentImage -= 1;
    displayPage(currentImage);
  }

  function displayImage (imageIndex) {
    document.getElementById("images").innerHTML = images[imageIndex];   
    document.getElementById("nextImageButton").style.visibility = "visible";
    document.getElementById("previousImageButton").style.visibility = "visible";

    if(imageIndex == images.length - 1) {
      document.getElementById("nextImageButton").style.visibility = "hidden";
    }
    if(imageIndex == 0) {
      document.getElementById("previousImageButton").style.visibility = "hidden";
    }
  }
</script>
4

1 回答 1

1
  1. 发布前更改所有选项卡。
  2. 使用代码创建一个 jsfiddle.net。
  3. 怎么了</div></div></div>？
  4. onClick="images/sample8.jpg" 应该做什么？
  5. 您在 onclick 中有相同的引号 - 如果您包装引号，您需要做="...('xxx');"
  6. document.getElementById("images").innerHTML = images[imageIndex];
    应该document.getElementById("image").src = images[imageIndex];

Live Demo 

var images = [ "http://lorempixel.com/output/food-q-c-640-480-1.jpg", 
               "http://lorempixel.com/output/food-q-c-640-480-2.jpg", 
               "http://lorempixel.com/output/food-q-c-640-480-3.jpg", 
               "http://lorempixel.com/output/food-q-c-640-480-4.jpg", 
               "http://lorempixel.com/output/food-q-c-640-480-5.jpg", 
               "http://lorempixel.com/output/food-q-c-640-480-6.jpg", 
               "http://lorempixel.com/output/food-q-c-640-480-7.jpg" ]
var tId,currentImage = 0;

function changeImage(dir) {
  if (dir === 0) currentImage = 0; // first image
  else if (dir===images.length-1) currentImage=images.length-1; // last image
  else currentImage+=dir*1; // next or previous
  if (currentImage<0 || currentImage>=images.length)  currentImage=0; // will wrap
  displayImage(currentImage);
}


function displayImage (imageIndex) {
  window.console && console.log(imageIndex); // remove when happy
  // document.getElementById("msg").innerHTML=(imageIndex+1)+"/"+images.length;  
  document.getElementById("image").src = images[imageIndex];   
  document.getElementById("nextImageButton").style.visibility=(imageIndex<images.length-1)?"visible":"hidden";
  document.getElementById("previousImageButton").style.visibility=(imageIndex>0)?"visible":"hidden";
}
function rotate() {
    changeImage(+1);
}
window.onload=function() {
  document.getElementById("autoRotate").onclick=function() {
    if (this.checked) tId=setInterval(rotate,3000)
    else clearInterval(tId);
  }
  document.getElementById("firstImageButton").onclick=function() { changeImage(0) }
  document.getElementById("lastImageButton").onclick=function() { changeImage(images.length-1) }
  document.getElementById("nextImageButton").onclick=function() { changeImage(1) }
  document.getElementById("previousImageButton").onclick=function() { changeImage(-1) }

}
于 2013-09-23T14:20:27.467 回答