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

发布于 2024-11-08 04:04:42 字数 740 浏览 4 评论 0原文

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

点击最后一个缩略图就可以看到问题。在 Chrome 中，缩略图和导航箭头之间存在间隙。 它在 Firefox 中运行良好。轮播包含在此

<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 中正常工作，但轮播的行为不一致。 这是问题的屏幕截图。

您能给我建议如何解决 chrome 中的问题吗？

谢谢，动画

原文

Here is a live demo: http://sp.smartclientdemo.com/index.php/portfolio?id=commercial

The problem can be seen by clicking on the last thumbnail. In Chrome the gap is coming between the thumbnail and navigational arrows. It working fine with Firefox. The carousel is contained inside this <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;">

Clicking on other thumbnails, for example ones to the left, are working properly in Chrome and the carousel is behaving inconsistently. Here is a screenshot of the problem.

Could you please give me suggestion how to solve problem in chrome.

Thanks,
Animesh

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一笑百媚生 2024-11-15 04:04:42

我查看了你的代码，现在总共包含了三个 jQuery，其中两个位于开头：

<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。您应该检查您的轮播插件支持哪个 jQuery 版本并使用它，或者然后尝试它是否可以与最新的 jQuery 版本一起正常工作。

我相信错误可能是 Firefox 和 chrome 如何处理这些多次包含的 jquery，并且可能是 chrome 使用旧版本而 Firefox 使用较新版本。如果删除多余的 jQuery 后问题仍然存在，您还应该告诉您正在使用的 Firefox 版本和 chrome 版本。

I looked at your code and there are now three jQuerys included total and two are at the beginning:

<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>

Also the last one is included twice. The other time its included at the end of the source where the "pikachoose" starts.

The first one is very old jQuery version 1.2.1 and the last one seems to be 1.5. You should check what jQuery version your carousel plugin supports and use that, or then try if it works fine with newest jQuery version.

I believe the error might be how firefox and chrome handles these multiple times included jquerys and it MIGHT be that chrome uses the older and firefox newer version. You should also tell what firefox version and chrome version you were using if the problem persists after deleting the extra jQuerys.

回复收藏 0 原文

八巷 2024-11-15 04:04:42

这是一个完整的演示，使用您的资源，但删除了所有额外的库。它在 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 中的标记，它不是一个完全有效的演示；但已经足够接近了。

Here is a complete demo using your resources that works but with all the extra libraries removed. It works as expected in Chrome 13 and 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>

Note: It is not a completely valid demo, due to the markup in the JavaScript; but it's close enough.

回复收藏 0 原文

~没有更多了~