Question

我是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上。它被称为“制作 - 手风琴 - 与Tabsjquery（我不能在这篇文章中提供第二个链接，因为我没有10哈哈的声誉）

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

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

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

1

TypeError：jQuery（“div.slides＆gt; ul”，jQueryslideshow.context）.cycle不是函数

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

2

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

任何帮助都会非常感激，因为我真的被困在这里。

另一方面，作为初学者，我可能会比这更复杂。所以，如果有人能给我一个在同一页面上播放手风琴和幻灯片的好方法，我真的很感激。

js.cycle.js和jquery.js冲突

0 个答案: