Javascript 使用Cycle2的响应式旋转木马

我正在使用和插件制作旋转木马

找到一个可根据调整大小的窗口宽度显示可变数量的项目

问题是旋转木马由于另一个幻灯片放映而中断

一切正常，直到主幻灯片循环播放第一张幻灯片，然后在页面上调整转盘大小，只显示一张幻灯片

演示

jQuery

function buildCarousel(visibleSlides) {
    $('.caro').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'img',
        carouselVisible: visibleSlides,
        carouselFluid: true
    });
}
function buildSlideshow() {
    $('.home-slideshow').cycle({
        fx: 'fade',
        slides: 'img',
        timeout: 12000
    });
}

function initCycle() {
    var width = $(document).width();
    var visibleSlides = 5;

    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 3}
    else {visibleSlides = 5};

    buildSlideshow();
    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    var destroyCarousel = $('.caro').cycle('destroy');

    if ( width < 400 ) {destroyCarousel;reinitCycle(1);} 
    else if ( width > 400 && width < 700 ) {destroyCarousel; reinitCycle(3);} 
    else {destroyCarousel;reinitCycle(5);}
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});

功能构建转盘（可视幻灯片）{
$（'.caro'）。循环({
fx:‘旋转木马’，
速度:600,，
幻灯片：“img”，
旋转可视：可视幻灯片，
旋转木马流体：真的
});
}
函数buildSlideshow（）{
$（'.home slideshow'）。循环({
外汇：“淡出”，
幻灯片：“img”，
超时：12000
});
}
函数initCycle（）{
var width=$（文档）.width（）；
var visibleSlides=5；
如果（宽度<400）{visibleSlides=1}
如果（宽度<700）{visibleSlides=3}
else{visibleSlides=5}；
构建幻灯片（）；
建筑转盘（可视幻灯片）；
}
函数reinit_cycle（）{
变量宽度=$（窗口）.width（）；
var destroucarousel=$（'.caro'）.cycle（'destroy'）；
如果（宽度<400）{destroyCarousel；reinitCycle（1）；}
如果（宽度>400&&width<700）{destroyCarousel；reinitCycle（3）；}
否则{销毁转盘；重新循环（5）；}
}
函数重新输入循环（可访问幻灯片）{
建筑转盘（可视幻灯片）；
}
var-reinitTimer；
$（窗口）。调整大小（函数（）{
clearTimeout（reinitTimer）；
Reinitimer=设置超时（reinit_循环，100）；
});
$（文档）.ready（函数（）{
initCycle（）；
});

HTML

<div class='main' style="max-width: 950px;margin: auto;">
    <div class="home-slideshow" style="margin-bottom: 150px;">
        <img style="width: 100%" src="http://placehold.it/950x250" alt="">
        <img style="width: 100%" src="http://placehold.it/950x250" alt="">
    </div>
    <div class="caro" >
        <img src="http://placehold.it/300x300" alt="">
        <img src="http://placehold.it/300x300" alt=""> 
        <img src="http://placehold.it/300x300" alt="">
        <img src="http://placehold.it/300x300" alt=""> 
        <img src="http://placehold.it/300x300" alt="">
        <img src="http://placehold.it/300x300" alt="">  
    </div>
</div>

---

您有以下行：

var destroyCarousel = $('.caro').cycle('destroy');

…它将

destroyCarousel

设置为该方法调用的结果（一个jQuery对象），而不是创建一个可以调用以执行销毁的函数

我想这就是你想要做的：

function reinit_cycle() {
    var width = $(window).width();
    var destroyCarousel = function() { // create a function
        $('.caro').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(3);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

函数reinit\u cycle（）{
变量宽度=$（窗口）.width（）；
var destroucarousel=function（）{//创建一个函数
$（'.caro'）。循环（'destroy'）；
}
如果（宽度<400）{
destroyCarousel（）；//调用函数
再注射周期（1）；
}否则，如果（宽度>400和宽度<700）{
旋转木马（）；
再注射周期（3）；
}否则{
旋转木马（）；
再注射周期（5）；
}
}

---

由于某些原因，在第一次幻灯片放映转换后，当它重新创建旋转木马时，它将所有图像的不透明度设置为0

添加

$（'.caro img'）.css（'opacity'，'1'）在初始化旋转木马后修复了它，但我相信有更好的解决方案，但您可能需要深入了解插件的源代码

顺便说一句，在同一个名为
reinitCycle
和
reinit\u cycle
的文件中创建两个函数是非常糟糕的做法。你只是想把自己弄糊涂。谢谢，也许我不清楚这个问题。如果你等到第一张幻灯片切换到下一张幻灯片，然后尝试调整页面大小，它仍然会中断。有趣的。。。非常感谢，我没听清楚。JSFIDLE中如何包含cycle2？我对这把小提琴和其他小提琴感到非常困惑。在HTML.External Resources选项卡中没有指向它的链接，它是从CDN添加的。我恐怕不明白这意味着什么——它是如何链接到小提琴的？没有指向CDN的链接。@Aerovistae，打开Fiddle页面，然后单击侧菜单上的
External Resources
选项卡。您将看到小提琴使用的资源的简短列表，包括
cycle2
和
carousel
。