Cylcle2沒有周期尋呼機顯示

我想爲圖片自動滑動（其工作）的網站製作幻燈片，並且應該有圓形按鈕在其下面點擊。但按鍵顯示不出來，甚至你我遵循http://jquery.malsup.com/cycle2/demo/pager.php Cylcle2沒有周期尋呼機顯示

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

    } 
})();

來源

2013-06-25 Tobbbe

做工精細這裏：http://jsfiddle.net/WTzH5/是否使用'演示slideshow.css'？ –

是的，我有。奇怪的是，當我查看示例中的代碼時，循環分頁器div中有span標籤，但是它們不會顯示在我的。 – Tobbbe

你的CSS有問題，你有'top：10px; *'，使用示例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>

來源

2013-06-25 09:59:56 falguni

試試這個：

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>

來源

2013-06-25 12:01:44

嘗試增加「高度：40像素;」到.cycle-pager類。

來源

2013-09-27 18:05:21

此問題導致的doctype使用<!doctype html>

來源

2013-10-07 14:00:55

Cylcle2沒有周期尋呼機顯示

回答

相關問題