JavaScript图像库中的下一个和上一个链接不起作用
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"的定义中,你缺少了一个逗号(就在"标题一"之前):
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窗格中,您应该将第一组上一个/下一个链接更新到目标S1,而不是S2。
更新的小提琴:http://jsfiddle.net/astHh/12/
相关文章:
- (angularJS)使ng-click在ng-repeat上打开一个链接
- 下一个/上一个锚链接,如何在用户滚动时更新下一个/上一个链接
- 点击jsp页面上的链接打开一个文件
- 如何在javascript中将下一个和上一个链接添加到当前滑块
- 具有另一个背景图像的图像上的链接不起作用
- 滚动自动化不会在最后一个链接上停止
- 水平滚动页面上的“上一个”和“下一个”链接
- 我试图使用用户通过JavaScript警报框输入的信息在HTML页面上创建一个链接
- IE上的颜色框,打开一个颜色框,然后立即跟随页面上的链接
- Twitter”;在推特上;按钮在Firefox中显示为一个按钮,在Chrome中只是一个链接
- 如何使用vanilla Javascript识别无序和/或嵌套列表序列中的上一个/下一个链接
- 如何获得下一个/上一个链接以停留在CarouFredSel幻灯片的两侧
- 只有一个链接上的单击事件
- JavaScript图像库中的下一个和上一个链接不起作用
- Jquery,添加上一个/下一个链接对幻灯片图像的效果
- 上一次完成后,立即加载一个链接列表
- 如何使用 jquery 获取下一个/上一个链接,无论它在 DOM 中的位置如何
- 滚动到每12个li元素与下一个/上一个链接的问题
- jQuery carousel -当到达列表上的最后一个项目时,禁用下一个/上一个链接
- MediaWiki如何使用扩展添加下一个和上一个链接:PageAfterAndBefore