簡單的Javascript圖像庫 - 與分頁點和多點實例

Question

我是新來的Javascript，但我一直在教自己的CSS和一些PHP，所以我希望能學到一點。我在過去幾天一直在尋找我想要的東西，希望這不是一個愚蠢的問題。

我正在嘗試爲我的porfolio項目頁面構建迷你圖像畫廊。我有一個大約8張大圖的頁面 - 每個都有一個不同的項目。我試圖得到它，如果你點擊一個圖像，它會加載該項目的下一個圖像（任務完成！我已經得到了與我在網上找到的代碼）

但我也希望分頁點基本上就是圓圈的圖像），就像我在其他網站上看到的那樣，可以表現圖像中的圖像。因此，如果項目有三個圖像，則會看到三個點，然後單擊第三個點將您帶到第三個圖像 - 點圖像將替換爲「選定點」圖像。合理？

我一直在尋找腳本和如何做到這一點的例子，這是我的Javascript已經得到。這是第一個項目的腳本。與其他我輸入相同的腳本，但更改變量。 img1成爲img2然後是img3等等。誰能說出有什麼問題？

<div class="project" id="proj1"> 

<script type="text/javascript"> 
var img1 = [ 
    "img/portf/tiger1.jpg", 
    "img/portf/tiger2.jpg", 
    "img/portf/tiger3.jpg" 
]; 
img1.current = 0; 
function showImage1(i) { 
$('#imag1').fadeOut(function() { 
this.src = img1[img1.current]; 
$(this).fadeIn(); 
}); 
} 

function NextImage1() { 
img1.current = (img1.current+1) % img1.length; 
showImage1(img1.current); 
} 

function PreviousImage1() { 
if (--img1.current < 0) { img1.current = img1.length - 1; } 
showImage1(img1.current); 
} 
onload = function(){ 
showImage1(0); 
}; 

</script> 

<div class="projname"> 

<div class="ProjectTitle"> 
Tigercat Website 
</div> 
<div class="PaginationButtons"> 
<a href="javascript:showImage1(0)"><img src="img/active.gif" /></a> 
<a href="javascript:showImage1(1)"><img src="img/inactive.gif" /></a> 
<a href="javascript:showImage1(2)"><img src="img/inactive.gif" /></a> 
</div> 

<div class="clear"></div> 

</div> 
<div class="projwindow"> 
<a href="javascript:NextImage1()"> 
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" /> 
</a> 

</div> 
</div> 

你可以看到我有這麼遠的位置：http://www.gmisen.com 非常感謝您的幫助！

Answer 1

可能不是最好的學習經驗，但你可以很容易與jQuery的週期插件實現這一目標：http://jquery.malsup.com/cycle/int2.html（看看尋呼機例子）

這裏有一個演示：http://jsfiddle.net/69LNJ/

HTML

<div class="slideshow"> 
<img src="http://flickholdr.com/400/400/cat/bw"> 
<img src="http://flickholdr.com/400/400/cat/bw/1"> 
<img src="http://flickholdr.com/400/400/cat/bw/2"> 
</div>​ 

JS

$(function() { 
    $('.slideshow').before('<div id="nav">').cycle({ 
     fx: 'fade', 
     speed: 'fast', 
     timeout: 0, 
     pager: '#nav' 
    }); 
})​; 

CSS

#nav{ 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    z-index: 1000; 
} 

#nav a{ 
    background-color: cyan; 
    border-radius: 10px; 
    height: 20px; 
    width: 20px; 
    display: block; 
    text-indent: -1000px; 
    float: left; 
    margin-right: 10px; 
} 
#nav a.activeSlide{ 
    background-color: blue; 
}