Question

我正在尝试通过javascript制作一个8图像按钮旋转器，我有按钮“＆lt;” “＆gt;” 中“＆LT;＆LT;” “＆GT;＆gt;” 中和一个复选框图像旋转器。我到目前为止可以发送我的代码和截图，有人可以帮忙吗？这是我的代码。

<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>

Answer 1

发布前更改所有标签。
使用代码创建一个jsfiddle.net。
</div></div></div>的内容是什么？
onClick =“images / sample8.jpg”该怎么办？
你在onclick中有相同的引号 - 如果你需要做引号，你需要做="...('xxx');"
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) }

}

图像旋转器的javascript代码

1 个答案: