![](/img/trans.png)
[英]Javascript image gallery : for loop for next and previous button is not working correctly
[英]Next and previous linking in JavaScript image gallery not working
我需要在同一頁面上有多個畫廊(帶字幕),並且一直在嘗試實現這個javascript,但我無法得到下一個| 以前的鏈接適用於任一圖庫。 新的JavaScript - 任何建議?
這是小提琴: http : //jsfiddle.net/astHh/11/
HTML:
<div style="text-align: center">
<!-- Place the first image here -->
<img src="http://www.cool-smileys.com/images/out11.jpg" id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
<br>
<!-- Place the text for the first image here --><div id="burns">Caption one</div>
<p>
<a href="#" onclick="S2.UpDown(-1); return false;">« Previous</a> |
<a href="#" onclick="S2.UpDown(1); return false;"> Next »</a>
</div>
<p>
<div style="text-align: center">
<!-- Place the first image here -->
<img src="http://www.cool-smileys.com/images/out13.jpg" id="mypic2" name="mypic2" alt="information" border="0" height="150" width="200">
<br>
<!-- Place the text for the first image here --> <div id="burns2">Caption two</div>
<p>
<a href="#" onclick="S2.UpDown(-1); return false;">« Previous</a> |
<a href="#" onclick="S2.UpDown(1); return false;"> Next »</a>
</div>
使用Javascript:
<script type="text/javascript">
function SimpleSlideShow(o){
this.img=document.getElementById(o.ImageID);
this.txt=document.getElementById(o.TextID);
this.ary=o.Array||[];
this.cnt=0;
}
SimpleSlideShow.prototype.UpDown=function(ud){
this.cnt+=ud;
this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
if (this.ary[this.cnt]){
if (this.img&&this.ary[this.cnt][0]){
this.img.src=this.ary[this.cnt][0];
this.img.alt=this.ary[this.cnt][1];
}
if (this.txt){
this.txt.innerHTML=this.ary[this.cnt][2]||'';
}
}
}
S1=new SimpleSlideShow({
ImageID:'mypic',
TextID:'burns',
Array:[
['http://www.cool-smileys.com/images/out11.jpg,' 'Caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out10.jpg','Caption two','The crystal clear lake'],
]
});
S2=new SimpleSlideShow({
ImageID:'mypic2',
TextID:'burns2',
Array:[
['http://www.cool-smileys.com/images/out13.jpg','caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out12.jpg','caption two','The lonesome, barren tree']
]
});
</script>
您的javascript中有多個語法錯誤:
從腳本窗格中刪除:
<script type="text/javascript">
</script>
在你的“S1”定義中,你錯過了一個逗號(就在'Caption one'之前):
S1=new SimpleSlideShow({
ImageID:'mypic',
TextID:'burns',
Array:[
['http://www.cool-smileys.com/images/out11.jpg,','Caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out10.jpg','Caption two','The crystal clear lake'],
]
});
然后在HTML窗格中,您應該將第一組prev / next鏈接更新為目標S1而不是S2。
更新小提琴: http : //jsfiddle.net/astHh/12/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.