0

私のサイトには、次のコードを使用して画像を移動できる[前へ/次へ]リンクがあります。 <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>
4

2 に答える 2

1

どうですか：

document.slideImage.onclick = nextImage;

また、イベント登録を使用することをお勧めします（アンカーにも）：

document.slideImage.addEventListener('click', nextImage);
于 2013-03-04T00:07:46.300 に答える
0

を使用することはお勧めしません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ます。

于 2013-03-04T00:35:39.957 に答える