写了一个简单的幻灯,但是上下翻动按钮在火狐和IE下点击后会打开一个空白页面,而谷歌是正常的。
<script type="text/javascript" src="/images/js/jquery-1.4.js"></script><script src="/images/js/jquery.superslide.2.1.1.js" type="text/javascript"></script>
<style type="text/css">
/* css 重置 */
.tup div,ul,li { padding: 0; margin: 0; }
ul { list-style: none ; }
img { border: none; }
a { blr: expression(this.onFocus=this.blur()); outline: none; }
/*本例css*/
.chinaz { left: 50%; top: 0px; width: 1660px; height: 370px; overflow: hidden; margin-left: -830px; position: absolute; }
/*数字按钮样式*/
.chinaz .num { overflow:hidden; height: 25px; position: absolute; bottom:12px; left: 15px; zoom:1; z-index:3 }
.chinaz .num li { width: 25px; height: 25px; line-height: 25px; text-align: center; font-weight: 400; font-family: "微软雅黑", Arial; color: #FFFFFF; background: #444444; margin-right: 10px; border-radius:50%; cursor:pointer; float: left; }
.chinaz .num li.on { background: #FF7700; } /*当前项*/
/*上一个 下一个*/
.chinaz .prev,
.chinaz .next { display: none; width: 40px; height: 100px; background: url(/images/btn.png) no-repeat; position: absolute; top: 115px;}
.chinaz .prev { left: 320px; }
.chinaz .next { right: 320px; background-position: right; }
.imgsf{ width:100%; height:370px; }
</style>
<div style="width: 100%; height: 370px; overflow: hidden; position: relative; margin-top:46px;">
<div class="chinaz">
<ul class="51buypic">
<li> <a href="http://cq.icqwz.com/LR/Chatpre.aspx?id=KGJ83106358" target="_blank"><img src="/images/h1.jpg" class="imgsf"/></a></li>
<li> <a href="http://cq.icqwz.com/LR/Chatpre.aspx?id=KGJ83106358" target="_blank"><img src="/images/h2.jpg" class="imgsf"/></a></li>
<li> <a href="http://www.cqwzwh.com/a/jiankangrenzhuanti/2013/0710/4w.html" target="_blank"><img src="/images/h3.jpg" class="imgsf"/></a></li>
<li> <a href="http://www.cqwzwh.com/a/jiankangrenzhuanti/2012/0401/rl.html" target="_blank"><img src="/images/h4.jpg" class="imgsf"/></a></li>
<li> <a href="http://cq.icqwz.com/LR/Chatpre.aspx?id=KGJ83106358" target="_blank"><img src="/images/h5.jpg" class="imgsf"/></a></li>
</ul>
<a target="_blank" class="prev" href="javascript:void(0);"></a>
<a target="_blank" class="next" href="javascript:void(0);"></a>
</div>
</div>
<script>
/*鼠标移过,左右按钮显示*/
$(".chinaz").hover(function(){
$(this).find(".prev,.next").fadeTo("show",0.1);
},function(){
$(this).find(".prev,.next").hide();
})
/*鼠标移过某个按钮 高亮显示*/
$(".prev,.next").hover(function(){
$(this).fadeTo("show",0.7);
},function(){
$(this).fadeTo("show",0.1);
})
$(".chinaz").slide({ titCell:".num ul" , mainCell:".51buypic" , effect:"fold", autoPlay:true, delayTime:700 , autoPage:true });
</script>
经过排查,发现是href="javascript:void(0);"导致的问题,本来javascript:void(0);的用处是不用整体刷新网页且返回一个空值,但这儿由于DOM本身的冒泡事件所以会最后执行HREF属性内的javascript:void(0);导致执行函数返回了一个空值,所以覆盖掉了前面正常执行函数所返回的值引起的错误。一般情况下,IE会先运行DOM本身绑定的事件,如ONCLICK;如果没有阻止冒泡,则会顺序执行HREF属性。如果想正确运行,可以在前面用RETURN FALSE终止冒泡,例如:
或者直接删去也行,如:
<a target="_blank" class="prev" ></a>
来源:浮游生物的博客