Question

这是一个现场演示：http://sp.smartclientdemo.com/index.php/portfolio?id=commercial

单击最后一个缩略图可以看到问题。在Chrome中，缩略图和导航箭头之间存在差距。 适用于Firefox 。轮播包含在此<ul>：

中

<ul id="pikame" class="pika-thumbs jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: -315px; margin: 0px; padding: 0px; width: 1155px;">

点击其他缩略图（例如左侧的缩略图）在Chrome中正常工作，并且轮播的行为不一致。 Here is a screenshot问题。

请你给我一些如何解决问题的建议。

谢谢，的Animesh

Answer 1

我看了你的代码，现在总共有三个jQuerys，两个在开头：

<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery-1.2.1.min.js"></script> 
<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>

最后一次也包含两次。另一次将其包含在“pikachoose”开始的源头末尾。

第一个是非常老的jQuery版本1.2.1，最后一个似乎是1.5。您应该检查您的carousel插件支持和使用的jQuery版本，或者尝试使用最新的jQuery版本。

我相信错误可能是firefox和chrome如何处理这些多次包括jquerys，而且可能是chrome使用旧的和firefox更新的版本。如果删除额外的jQuerys后问题仍然存在，你还应该告诉你使用的firefox版本和chrome版本。

Answer 2

这是一个完整的演示，使用您的资源，但删除了所有额外的库。它在Chrome 13和Firefox 4中按预期工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>portfolio | S.P</title>
    <script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>
    <script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery.pikachoose.js"></script>
    <link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/bottom.css" type="text/css" rel="stylesheet" />
    <link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/style1.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
        $(function() {
            $('#pikame').PikaChoose({carousel:true});
            $('<div class="slide-top"></div>').insertBefore('.pika-stage');
            $('<div class="slide-bottom"></div>').insertAfter('.pika-stage');
        });
    </script>
</head>
<body>
<ul id="pikame" class="jcarousel-skin-pika">
    <li><a href="#" ><img src="http://sp.smartclientdemo.com/uploads/files/93270001.JPG" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car8.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car1.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car2.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car4.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car5.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car3.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car7.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car9.jpeg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car10.jpeg" alt=""/></a><span></span></li>
</ul>
<div class="portfolioright">
    <div class="pikachoose"></div>
</div>
</body>
</html>

注意：由于JavaScript中的标记，它不是一个完全有效的演示;但它足够接近。

jquery滑块在Chrome中无法正常工作

2 个答案: