不显眼的 Javascript 画廊导航

Question

我的网站上有一个幻灯片 - 一切正常 - 但我想更改导航以使其不显眼。

我该怎么做？导航是：

<a href="javascript:slideshow.previous()" id="slideshow_prev" ><span>&lt;prev</span></a>
<a href="javascript:slideshow.slideshow.play()" id="slideshow_start" ><span>start</span></a>
<a href="javascript:slideshow.hotlink()" id="slideshow_view" ><span>view</span></a>
<a href="javascript:slideshow.pause()" id="slideshow_stop" ><span>stop</span></a>
<a href="javascript:slideshow.next()" id="slideshow_next" ><span>next&gt;</span></a>

Answer 1

您可以在事件加载到 dom 后附加事件。 IE 和 wc3 附加事件的处理方式有所不同，这就是 jquery 之类的库大放异彩的地方，因为它们标准化了事件模型。

adding event listener cross browser http://www.quirksmode.org/js/events_advanced.html

jquery

$('#slideshow_prev').click(slideshow.previous);

没有 jquery w3c 标准

document.getElementById("slideshow_prev").addEventListener("click", slideshow.previous);

对于旧版ie

document.getElementById("slideshow_prev").attachEvent('onclick',slideshow.previous)

Answer 2

这是一个基本示例。

首先，删除所有内联 javascript：

<a id="slideshow_prev" ><span>&lt;prev</span></a>
<a id="slideshow_start" ><span>start</span></a>
<a id="slideshow_view" ><span>view</span></a>
<a id="slideshow_stop" ><span>stop</span></a>
<a id="slideshow_next" ><span>next&gt;</span></a>

获取元素引用：

var prev = document.getElementById('slideshow_prev');
var start = document.getElementById('slideshow_start');
//etc

为每个元素附加事件监听器：

prev.addEventListener('click', slideshow.previous);
start.addEventListener('click', slideshow.slideshow.play);
//etc

优化/自动化

我没有手动获取每个引用并附加侦听器，而是创建了一个对象以将 id 与函数相关联，然后迭代对象的属性以自动化该过程：Live demo (click).

var x = { 
  slideshow_prev: slideshow.previous,
  slideshow_start: slideshow.slideshow.play,
  slideshow_view: slideshow.hotlink,
  slideshow_stop: slideshow.pause,
  slideshow_next: slideshow.next
};

for (var prop in x) {
  var elem = document.getElementById(prop);
  var clickFunc = x[prop];
  elem.addEventListener('click', clickFunc);
}