2013-03-04 222 views
0

我有我的網站上,讓我走通的圖像與此代碼上一頁/下一頁鏈接下一張圖片: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num'></span>請點擊圖片在JavaScript

我把圖像在下面的代碼。上一個/下一個鏈接工作良好,但我希望能夠點擊圖像本身導航到下一個圖像:所以點擊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> 

回答

1

如何:

document.slideImage.onclick = nextImage; 

我也建議使用事件註冊(也爲錨):

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

我會在哪裏放這些代碼?你建議把兩者都放入還是隻放在下面的一箇中?謝謝 – RCook 2013-03-04 03:07:21

+0

@RCook只是第二個;把它放在一個腳本文件中,你在加載圖像之後加入* – 2013-03-04 03:10:03

+0

我把它放在圖像的下面:看下面和上一個/下一個鏈接停止工作,並且圖像沒有點擊到下一個圖像...請幫助,我是否把它放在錯誤的地方?

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屬性。

+0

這一個沒有爲我工作。禁用正在工作的上一個/下一個鏈接,並且點擊圖像沒有進入下一個圖像。不過謝謝。 – RCook 2013-03-04 03:13:12