0

我正在尝试为图片自动滑动（有效）的网站制作幻灯片，并且应该在其下方单击圆形按钮。但是按钮没有显示，即使你按照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);

    }
})();
4

4 回答 4

1

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

于 2013-10-07T14:00:55.440 回答
0

试试这个 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>
于 2013-06-25T09:59:56.450 回答
0

尝试这个：

JSFiddle 演示

<!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>
于 2013-06-25T12:01:44.597 回答
0

尝试添加“高度：40px；” 到 .cycle-pager 类。

于 2013-09-27T18:05:21.790 回答