a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样:
1. <a href="网页特效://" onclick="dosomething()">a1</a>
2. <a href="javascript:void(0)" onclick="dosomething()">a2</a>
3. <a href="###" onclick="dosomething()">a3</a>
第三种方法dosomething()中切换图片完全没有问题, 但是href="###" 却带来了另一个问题, 占用了锚点,页面url也不美观.
第1,2种方式虽然没有上面的问题, 但会引发ie6的奇怪bug, dosomething()中图片无法加载.
只要在dosomething();后面增加一个return false;就可以解决了.
如果是绑定事件, 同样在function最后增加return false;就行.
看一款js图片切换效果
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<a href="http://www.111cn.net/">站长特效网</a>,<button onclick="slider.next()">下一张</button>
<script type="text/javascript">
<!--
slider = {
isie : true,
m_imagesource : [],
m_selidx : 0,
m_direction : 1,
m_mainviewer : null,
m_delaytimer : null,
m_delaytimer1 : null,
m_curobj : null,
m_tarobj : null,
m_inited : false,
init : function(id, w, h, w1, h1, p, t, s, source){
this.isie = document.all ? true : false;
this.canvaswidth = w;
this.canvasheight = h;
this.imagewidth = w1;
this.imageheight = h1;
this.m_percent = p;
this.m_top = t;
this.m_spacewidth = s;
this.writecanvas(id);
for(var i=0;i<source.length;i++)
{//欢迎来到站长特效网，我们的网址是，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
this.container.innerhtml += '<img src="'+source[i]+'" border="0" style="'+(this.isie?'filter:alpha(opacity=50)':'opacity:0.5')+';width:'+w1+'px;height:'+h1+'px;position:absolute;left:'+(i*w1+i*this.m_spacewidth)+'px;top:'+this.m_top+'px;" index="'+i+'"/>';
}
this.m_mainviewer = this.container.firstchild.clonenode(true);
this.bind();
this.start();
},
writecanvas : function(id)
{//欢迎来到站长特效网，我们的网址是，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
document.write('<div id="'+id+'" style="width:'+this.canvaswidth+'px;height:'+this.canvasheight+'px;position:relative;overflow:hidden;background-color:black"></div>');
this.container = document.getelementbyid(id);
},
bind : function(obj, evt, fun){
var obj = this.container;
for(var i=0;i<obj.childnodes.length;i++)
{
this.attachevent(this.container.childnodes[i], "mouseo教程ver", this.mouseover);
this.attachevent(this.container.childnodes[i], "mouseout" , this.mouseout);
this.attachevent(this.container.childnodes[i], "click" , this.click);
}//欢迎来到站长特效网，我们的网址是，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
},
attachevent : function(obj, evt, fun){
if (slider.isie)
{
obj.attachevent("on"+evt, fun)
}else
{
obj.addeventlistener(evt, fun, false);
}
},
mouseover : function(e)
{
if(!e)e=window.event;
var obj = e.srcelement || e.target;
if (slider.isie)
{
obj.style.filter = "alpha(opacity=80)";
}else{
obj.style.opacity = "0.8";
}
},
mouseout : function(e)
{
if(!e)e=window.event;
var obj = e.srcelement || e.target;
if (slider.isie)
{
obj.style.filter = "alpha(opacity=50)";
}else{
obj.style.opacity = "0.5";
}//欢迎来到站长特效网，我们的网址是，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
},
click : function(e)
{
if(!e)e=window.event;
var obj = e.srcelement || e.target;
var mobj = slider.m_mainviewer;
slider.m_selidx = obj.getattribute("index");
slider.m_curobj = slider.m_mainviewer;
slider.m_tarobj = obj;
slider.m_delaytimer = slider.fadein(200,5);
},
start : function(){
var obj = this.m_mainviewer;
if (slider.isie)
{
obj.style.filter = "alpha(opacity=100)";
}else{
obj.style.opacity = "1";
}
this.container.appendchild(this.m_mainviewer);
this.m_mainviewer.style.width = parseint(this.m_mainviewer.style.width)*(1+this.m_percent)+"px";
this.m_mainviewer.style.height = parseint(this.m_mainviewer.style.height)*(1+this.m_percent)+"px";
this.m_curobj = this.container.childnodes[this.m_selidx];
this.m_tarobj = this.m_mainviewer;
if(this.m_delaytimer)clearinterval(slider.m_delaytimer);
this.m_delaytimer = this.fadein(200,5);
},
next : function(){
var obj = this.container;
var mobj = this.m_mainviewer;
if(this.m_selidx == obj.childnodes.length-2)
{
this.m_direction = -1;
}
if(this.m_selidx == 0)
{
this.m_direction = 1;
}
slider.m_curobj = mobj;
slider.m_tarobj = obj.childnodes[this.m_selidx];
this.m_delaytimer = this.fadein(200,5);
mobj.src = obj.childnodes[this.m_selidx].src;
if(this.m_direction==-1){
this.m_selidx --;
}else{
this.m_selidx ++;
}
},
fadein : function(aa, ab){
var obj = this.container;
with(this.m_curobj.style){var t1 = parseint(left);var t3 = parseint(width);var t4 = parseint(height);var t5 = parseint(top);}
if (slider.m_inited)
{
var k1 = (t1 - (this.canvaswidth- parseint(this.m_curobj.style.width))/2)/ab;
var k3 = (t3-parseint(this.m_tarobj.style.width))/ab;
var k4 = (t4-parseint(this.m_tarobj.style.height))/ab;
var k5 = (t5 - parseint(this.m_tarobj.style.top))/ab;
}else{
var k1 = (t1 - (this.canvaswidth- this.imagewidth*(1+this.m_percent))/2)/ab;
var k3 = (t3- this.imagewidth*(1+this.m_percent))/ab;
var k4 = (t4 - this.imageheight*(1+this.m_percent))/ab;
var k5 = (this.imageheight * this.m_percent/2)/ab;
}
var mobj = this.m_mainviewer;
return setinterval(function(){if(ab<1){
clearinterval(slider.m_delaytimer);
if(slider.m_inited){
if (!slider.m_fadein)
{
slider.m_curobj = obj.childnodes[slider.m_selidx];
slider.m_tarobj = mobj;
mobj.src = obj.childnodes[slider.m_selidx].src;
slider.m_fadein = true;
slider.m_inited = false;
slider.m_delaytimer = slider.fadein(200,10);
}else{
slider.m_fadein = false;
slider.m_inited = true;
}
}
slider.m_inited = true;
return;
}
ab--;t1-=k1;t3-=k3;t4-=k4;t5-=k5;
if (slider.m_fadein)
{
for(var i=0;i<obj.childnodes.length-1;i++)
{
obj.childnodes[i].style.left = (parseint(t1) + (slider.imagewidth + slider.m_spacewidth)*(i-slider.m_selidx))+"px";
}
}
with(mobj.style){left = t1 + "px";top = t5 + "px";width = t3 + "px";height = t4 + "px";}
}
,aa/ab)
}
}
slider.init('aaa',500,400,250,200, 0.5, 100, 20, [
"/image/1.jpg",
"/image/2.jpg",
"/image/3.jpg",
"/image/4.jpg",
"/image/5.jpg",
"/image/1.jpg",
"/image/2.jpg",
"/image/3.jpg"
]);
//-->
</script>
</body>
</html>