Fatal编程技术网
  • javascript/
  • Javascript Cycle2没有显示循环寻呼机

Javascript Cycle2没有显示循环寻呼机

javascript html css twitter-bootstrap

Javascript Cycle2没有显示循环寻呼机,javascript,html,css,twitter-bootstrap,jquery-cycle2,Javascript,Html,Css,Twitter Bootstrap,Jquery Cycle2,我正在尝试为一个网站制作一个幻灯片，在这个网站上，图片可以自动滑动（这是可行的），并且应该有圆形按钮在下面单击。但是按钮没有显示，即使你我已经按照指示 我的HTML： <div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager"> <img src="http://jquery.malsup.c

我正在尝试为一个网站制作一个幻灯片，在这个网站上，图片可以自动滑动（这是可行的），并且应该有圆形按钮在下面单击。但是按钮没有显示，即使你我已经按照指示

我的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>
还有我的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);

    }
})();
试试这个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>


（功能（）{
window.onload=function（）{//main
$.getScript（“/js/cycle2.js”，null）；//处理幻灯片放映
$.getScript（“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“，空）；
}
})();
试试这个：


文件
尝试将“height:40px；”添加到.cycle pager类。

此问题导致doctype Use

在这里工作正常：您是否使用
演示幻灯片.css
？是的，我有。奇怪的是，当我看示例中的代码时，cycle pager div中有span标记，但hey不会出现在我的示例中*，使用示例CSS，然后更改位置。好的，现在我已经从演示中复制粘贴了整个CSS，但它仍然没有显示：它一定是其他东西，我会注释掉你自己的CSS，然后一点一点地添加回去，直到你找到问题的根源，这是真正调试它的唯一方法——如果滑块确实在滑动，那么它就不是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>

<!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>