Cycle2 没有显示循环寻呼机答案

【问题标题】：Cylcle2 no cycle-pager shows upCycle2 没有显示循环寻呼机
【发布时间】：2013-06-25 09:53:15
【问题描述】：

我正在尝试为图片自动滑动的网站制作幻灯片（有效），并且应该有圆形按钮可以点击它。但是按钮没有显示，即使你按照http://jquery.malsup.com/cycle2/demo/pager.php的指示进行操作

我的 HTML：

<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">

        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
    </div>
    <div class="cycle-pager"></div>

我的 CSS：

    .cycle-pager { 
    text-align: center; 
    width: 100%; 
    z-index: 500; 
    position: absolute; 
    top: 10px;*
    overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; 
    font-size: 50px; 
    width: 16px; 
    height: 16px; 
    display: inline-block; 
    color: #999999; 
    cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

.cycle-pager{
    width: 500px;
    height: 30px;
    margin-top: 517px;
}

还有我的 JavaScript：

(function(){
    window.onload = function(){ //main
        $.getScript("/js/cycle2.js", null); //Handles the slideshow
        $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);

    }
})();

【问题讨论】：

在这里工作正常：jsfiddle.net/WTzH5 你在使用demo-slideshow.css 吗？
是的，我有。奇怪的是，当我查看示例代码时，cycle-pager div 中有 span 标签，但它们不会出现在我的中。
你的CSS有问题，你有top: 10px;*，使用示例CSS，然后改变位置。
好吧，现在我已经从演示中复制粘贴了整个 css，但它仍然没有显示出来：S 它必须是别的东西
我会注释掉你自己的 CSS，然后一点一点地添加回来，直到你发现问题出在哪里，这是真正调试它的唯一方法 - 就好像滑块是实际滑动，那么这不是 Javascript 问题。

标签： javascript html css twitter-bootstrap jquery-cycle2

【解决方案1】：

这个问题导致doctype使用<!doctype html>

【讨论】：

【解决方案2】：

试试这个javascript

<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
    window.onload = function(){ //main
        $.getScript("/js/cycle2.js", null); //Handles the slideshow
        $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);

    }
})();
</script>

【讨论】：

【解决方案3】：

试试这个：

JSFiddle Demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="http://malsup.github.io/jquery.cycle2.js"></script>

    <link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">

</head>
<body>
    <div class="cycle-slideshow" data-cycle-fx="scrollHorz"  data-cycle-timeout="2000">
    <!-- empty element for pager links -->
    <div class="cycle-pager"></div>

    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
    </div>

</body>
</html>

【讨论】：

【解决方案4】：

尝试添加“height:40px;”到 .cycle-pager 类。

【讨论】：