为轮播包含两个 JavaScript 文件答案

【问题标题】：Include two JavaScript files for a carousel为轮播包含两个 JavaScript 文件
【发布时间】：2014-02-27 11:44:56
【问题描述】：

在我的 Magento 网站上，我为两种轮播添加了两个 jQuery 脚本：

<script src="<?php echo $this->getSkinUrl('js/jquery.rs.carousel.js') ?>"></script>
<script src="<?php echo $this->getSkinUrl('js/carousel.js') ?>"></script>

jquery.rs.carousel.js：https://github.com/richardscarrott/jquery-ui-carousel/blob/master/src/js/jquery.rs.carousel.js
carousel.js：https://github.com/richardscarrott/jquery-carousel/blob/master/jquery.carousel.js

创建轮播时出现我的问题。我不知道如何调用脚本而不是另一个。

当我使用这个时：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.un-prod-carousel').carousel();
    });
</script>

它为我创建了一个带有jquery.rs.carousel.js 的轮播（这就是我想要的）。

但是当我想用carousel.js 创建一个轮播时：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#prod-sim-carousel').carousel({itemsPerPage: 5, itemsPerTransition: 5});
    });
</script>

它不起作用，因为我认为它调用了jquery.rs.carousel.js的函数，而不是carousel.js的函数。

你能告诉我如何调用特定脚本的函数吗？

【问题讨论】：

您确定要按顺序包含两个轮播脚本吗？我希望第二个包含的那个会覆盖第一个的$.fn.carousel。在您的描述中，第一个 jquery.rs.carousel.js 有效，但第二个无效。

标签： javascript jquery magento carousel

【解决方案1】：

也许不是最好但可行的解决方案是保存其中一个脚本，例如carousel.js 和本地更改

$.fn.carousel = function(options) {
return this.each(function() {
var obj = Object.create(Carousel);
obj.init($(this), options);
$.data(this, 'carousel', obj);
});
};

到：

$.fn.otherCarousel = function(options) {
return this.each(function() {
var obj = Object.create(Carousel);
obj.init($(this), options);
$.data(this, 'carousel', obj);
});
};

并将其称为 $(selector).otherCarousel()

【讨论】：