以下jQuery代码用于PHP / Wordpress站点。它适用于FireFox,IE7 +和Opera,但不适用于Chrome或Safari。
代码是一个图像滑块和一个应该适用于所有浏览器的弹出图像。但是当我点击下一个/上一个按钮时,弹出图像会出现在图像旁边,而不是在顶部。
代码:
$(document).ready(function() {
var item_width = $('#slipers li').outerWidth(true);
var left_value = item_width * (-1);
$('#slipers li:first').before($('#slipers li:last'));
$('#slipers ul').css({'left' : left_value});
$('#prev').click(function() {
var left_indent = parseInt($('#slipers ul').css('left')) + item_width;
$('#slipers ul:not(:animated)').animate({'left' : left_indent}, 500,function(){
$('#slipers li:first').before($('#slipers li:last'));
$('#slipers ul').css({'left' : left_value});
});
return false;
});
$('#next').click(function() {
var left_indent = parseInt($('#slipers ul').css('left')) - item_width;
$('#slipers ul:not(:animated)').animate({'left' : left_indent}, 500, function () {
$('#slipers li:last').after($('#slipers li:first'));
$('#slipers ul').css({'left' : left_value});
});
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("li.yah").mouseover(function() {
$(".hover", this).addClass("mun");
});
$("li.yah").mouseleave(function() {
$(".hover", this).removeClass("mun");
});
});
</script>
PHP文件:
<div id="bungkus">
<div id="next"><img src="/images/kiri.png"></div>
<div id="slipers">
<ul class="bawah">
/*looping when i get data from wp*/
<li class="yah"><a href="#" >
<img src ="img"> </a>
<div class="hover hid">
<div class="judul1">
<img src="image"/>
</div>
<div class="judul2"><?php the_title();?></div>
<div class="judul3"><?php excerpt(20);?></div>
</div>
</li>
/*looping end here */
</ul></div>
<div id="prev" align="right"><img src="<?php bloginfo('url');?>/images/kanan.png"></div>
</div>
可以找到问题的演示here。您需要多次点击(4次)才能在Chrome中看到错误。