1

我是 javaScript 和 Jquery 的新手。我想设计一个在同一页面上同时包含手风琴导航和幻灯片的网站。为了做到这一点，我从 htmldrive.net 下载了这个自动滚动幻灯片插件：

http://www.htmldrive.net/items/show/110/Auto-Scrolling-Slideshow-Tabs-jQuery-

（这个插件远程链接到“ajax.googleapis”。它利用了“jquery.cycle.js”插件，最后主要的javascript位于“slideshow.js”中。）

还有这个手风琴插件，也来自 htmldrive.net：

另一个插件也在 htmldrive 上。它被称为“Make-accordions-with-the-Tabsjquery（我无法在这篇文章中提供第二个链接，因为我没有 10 哈哈的声誉）

（这个插件使用了 jquery.js 插件。它在 html 中也有内联 javascript）

我已经设法让这两个插件在不同的页面上工作，我遇到的问题是当它们都放在同一页面上时它们似乎会引起冲突。冲突似乎来自将 jquery.js 和 jquery.cycle.js 文件链接到同一页面。有趣的是，更改链接它们的顺序会产生不同的错误。

将这两个 .js 文件链接到同一页面时出现的错误是：

1.

TypeError: jQuery("div.slides > ul", jQueryslideshow.context).cycle 不是函数

（当我在链接 jquery.cycle.js 插件之后链接 jquery.js 插件时会发生这种情况）

2.

类型错误：jQuery.tools 未定义

TypeError: jQuery("#accordion").tabs 不是函数

（当我在链接 jquery.js 插件之后链接 jquery.cycle.js 插件时会发生这种情况）

对我来说，浏览器似乎加载了第一个 .js 文件，然后在加载第二个 .js 文件时忘记了该文件中的功能。我知道有 $.noConflict(); 显然应该有助于解决此类冲突的代码，但它似乎在这里不起作用。

slideshow.js 代码如下：

$slideshow = {
context: false,
tabs: false,
timeout: 1000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 300,      // time it takes to slide in each slide (in ms) when clicking through tabs
fx: 'scrollLeft',   // the slide effect to use

init: function() {
    // set the context to help speed up selectors/improve performance
    this.context = $('#slideshow');

    // set tabs to current hard coded navigation items
    this.tabs = $('ul.slides-nav li', this.context);

    // remove hard coded navigation items from DOM 
    // because they aren't hooked up to jQuery cycle
    this.tabs.remove();

    // prepare slideshow and jQuery cycle tabs
    this.prepareSlideshow();
},

prepareSlideshow: function() {
    // initialise the jquery cycle plugin -
    // for information on the options set below go to: 
    // http://malsup.com/jquery/cycle/options.html
    $('div.slides > ul', $slideshow.context).cycle({
        fx: $slideshow.fx,
        timeout: $slideshow.timeout,
        speed: $slideshow.slideSpeed,
        fastOnEvent: $slideshow.tabSpeed,
        pager: $('ul.slides-nav', $slideshow.context),
        pagerAnchorBuilder: $slideshow.prepareTabs,
        before: $slideshow.activateTab,
        pauseOnPagerHover: true,
        pause: true
    });            
},

prepareTabs: function(i, slide) {
    // return markup from hardcoded tabs for use as jQuery cycle tabs
    // (attaches necessary jQuery cycle events to tabs)
    return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
    // get the active tab
    var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

    // if there is an active tab
    if(activeTab.length) {
        // remove active styling from all other tabs
        $slideshow.tabs.removeClass('on');

        // add active styling to active button
        activeTab.parent().addClass('on');
    }            
}            
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});

手风琴的内联 javaScript 如下所示：

 <script>
jQuery(function() { 

jQuery("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex:     null});
});
</script>



<!-- activate tabs with JavaScript -->
<script>

// add new effect to the tabs
jQuery.tools.tabs.addEffect("slide", function(i, done) {

// 1. upon hiding, the active pane has a ruby background color
this.getPanes().slideUp().css({backgroundColor: "#2c2c2c"});

// 2. after a pane is revealed, its background is set to its original color (transparent)
this.getPanes().eq(i).slideDown(function()  {
    jQuery(this).css({backgroundColor: 'transparent'});

    // the supplied callback must be called after the effect has finished its job
    done.call();
});
});
</script>

任何帮助将不胜感激，因为我真的被困在这里。

另一方面，作为初学者，我可能使这种方式比我应该做的更复杂。因此，如果有人能给我一个在同一页面上显示手风琴和幻灯片的好方法，我将不胜感激。

4

0 回答 0