代码之家 › 专栏 › 技术社区 › RCook

在javascript中使图像可点击到下一个图像

clickable hyperlink image css javascript

0

RCook · 技术社区 · 12 年前

我的网站上有一个上一个/下一个链接,可以让我浏览带有以下代码的图像: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num'></span>

我已经将图像放在下面的代码中。上一个/下一个链接工作得很好,但我希望能够点击图像本身导航到下一个图像:所以点击1.jpg,然后转到2.jpg,依此类推,一旦点击5.jpg,就会回到1.jpg。请提前告知,谢谢您的帮助。我是一个初学者,盲目地建立我的网站,任何帮助都是非常感激的。

<script type="text/javascript">

var image = new Array("jpegs/1.jpg",
"jpegs/2.jpg",
"jpegs/3.jpg",
"jpegs/4.jpg",
"jpegs/5.jpg"
)

var imgNumber=1

var numberOfImg = image.length

function previousImage(){
  if(imgNumber > 1){
    imgNumber--
    }

  else{
    imgNumber = numberOfImg
    }

document.slideImage.src = image[imgNumber-1]

  }
function nextImage(){
  if(imgNumber < numberOfImg){
    imgNumber++
    }

  else{
    imgNumber = 1
    }

document.slideImage.src = image[imgNumber-1]

  }

</script>

2 回复 | 直到 12 年前

1

Explosion Pills 12 年前

怎么样:

document.slideImage.onclick = nextImage;

我还建议使用事件注册(也适用于主播):

document.slideImage.addEventListener('click', nextImage);

2

0

Michael Theriot 12 年前

我不建议使用 href="Javascript:function()" ,所以给你一个如何处理它的想法。。。

<script type="text/javascript">
  window.onload = function() {
    var n = 0;
    var src = ["jpegs/1.jpg", "jpegs/2.jpg", "jpegs/3.jpg", "jpegs/4.jpg", "jpegs/5.jpg"];
    var e = document.getElementById('slideImage');
    var prev = function() {
      n -= 1;
      if(n < 0) n = src.length - 1;
      e.setAttribute('src', src[n]);
    };        
    var next = function() {
      n += 1;
      if(n >= src.length) n = 0;
      e.setAttribute('src', src[n]);
    };
    e.onclick = next;
    document.getElementById('nextlink').onclick = next;
    document.getElementById('prevlink').onclick = prev;
  };
</script>

此方法不将变量写入 window (不包括 onload )并且只需要 id 属性