Question

我正在使用第一个版本的循环设置幻灯片，然后认为我会更新到最新版本，但是一旦我链接了文件，我的幻灯片就破了。我不确定为什么它在版本1中工作但不是2.我甚至得到一个控制台消息：[cycle2] --c2 init--。

想法？

HTML：

    <div class="row">
    <div class="span1">
        <div class="chevron">
            <i class="icon-chevron-left"></i>
        </div>
    </div>
    <div class="span8">
        <div class="slide-show-container noselect">
            <div class="slide">
                <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
            </div>
            <div class="slide">
                <div id="highcharts01"> </div>
            </div>
            <div class="slide">
                <div id="highcharts02"> </div>
            </div>
            <div class="slide">
                <img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" />
            </div>
        </div>
    </div>
    <div class="span1">
        <div class="chevron">
            <i class="icon-chevron-right"></i>
        </div>
    </div>
</div>
<div class="row" id="slideNav">
    <div class="offset1 span8 noselect" id="circleNav">

    </div>
</div>

JS：

$('.slide-show-container').cycle({ 
fx:    'fade', 
speed:  500,
timeout: 0,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav",
after: initCharts
});

Answer 1

您的代码和下面的代码之间有什么区别？

从您的JS中删除了after: initCharts和timeout: 0。
添加了jquery.cycle.all.js和jquery.min.js
将position: relative;添加到.slide-show-container
为图片添加了position: absolute;和z-index: 5;

它现在正在运行，但我猜你的寻呼机不会显示，因为我没有包含div图像的CSS。

$(document).ready(function() {
    $('.slide-show-container').cycle({
	fx:    'fade',
        speed:  500,
        next: ".icon-chevron-right",
        prev: ".icon-chevron-left",
        pager: "#circleNav"
    });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="row">
    <div class="span1">
        <div class="chevron">
            <i class="icon-chevron-left"></i>
        </div>
    </div>
    <div class="span8">
        <div class="slide-show-container noselect" style="position: relative;">
            <div class="slide">
                <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" width="180" height="180" style="position: absolute; z-index: 5;"/>
            </div>
            
            <div class="slide">
                <div id="highcharts01"> </div>
            </div>
            <div class="slide">
                <div id="highcharts02"> </div>
            </div>
            <div class="slide">
                <img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" width="180" height="180" style="position: absolute; z-index: 5;"/>
            </div>
        </div>
    </div>
    <div class="span1">
        <div class="chevron">
            <i class="icon-chevron-right"></i>
        </div>
    </div>
</div>
<div class="row" id="slideNav">
    <div class="offset1 span8 noselect" id="circleNav" >

    </div>
</div>

希望我能为此提供帮助，你也想要这样的东西。

Jquery Cycle2没有初始化

1 个答案: