Question

以下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中看到错误。

Chrome中的jQuery图像滑块问题

0 个答案: