Question

我正在尝试为一个网站制作幻灯片，其中图片自动滑动（有效），并且应该有圆形按钮点击它下方。但即使您按照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);

    }
})();

Answer 1

此问题导致doctype使用<!doctype html>

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

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

Answer 4

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

Cylcle2没有循环寻呼机出现

4 个答案: