jQuery的cycle2尋呼機不工作

我試過一切可以得到的cycle2尋呼機工作，但沒有任何我試過有所作爲。我已經複製並粘貼了演示頁面中的示例，並在此處包含代碼 - 它非常小。 cycle.css文件是演示中CSS文件的精確副本，無需任何修改。jQuery的cycle2尋呼機不工作

這是什麼症狀？該尋呼機出現在位於頁面左側的非常小的黑色子彈中。我期待什麼？像演示中那樣放置更大的彩色子彈。

我搜索了其他職位的高和低，但還沒有找到答案。任何人都可以請幫忙。如果你想看到我所看到的那麼這裏的網址：http://school4kids.org/test-cycle2.asp

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<!-- Stylesheets --> 
<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme"> 
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/site.css"> 
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/demo/demo-slideshow.css"> 

<!-- Javascripts --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://malsup.github.com/jquery.cycle2.js"></script> 


</head> 

<body> 


<br><br> 

<div class="example-pager"></div> 
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz 
    data-cycle-timeout=2000 
    data-cycle-pager=".example-pager" 
    > 
    <!-- 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> 
<div class="example-pager"></div> 

<br><br> 


</body> 

</html>

附加信息更多的探索，我意識到有什麼東西在的site.css之後在做一些魔術，沒有這個文件的東西沒有工作。我把它剝離到最低限度（我不想要它，因爲它提示我自己的造型），並發現需要將子彈放在正確位置的零件。將此與以前的解決方案相結合，然後一切正常。我現在不包括任何樣式文件從演示，並創造了自己的CSS文件剛剛包含以下內容：

.cycle-pager { display: block; } 

.example-pager { text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; font-family: Arial; font-size: 14px; line-height: 18px; color: #333; } 
.example-pager span { font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; } 
.example-pager span.cycle-pager-active { color: #D69746;} 
.exmaple-pager > * { cursor: pointer;}

來源

2013-11-21 Richard

我一直在玩這個。現在你會看到我與實際的演示CSS鏈接。如果你願意，你可以按照代碼中的鏈接來檢索CSS文件。正如我所說，這是官方的CSS文件。 – Richard

使用下面的CSS（放在頭標籤在你的HTML）。它將按預期工作。

Demo

CSS：

.external { position: static } 
.external > * { margin: 0 5px } 
.cycle-pager { display: block; } 

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

來源

2013-11-21 10:45:05 nik

行得通，謝謝。哪一部分的魔術能夠訣竅？我很困惑，爲什麼演示CSS不起作用。 – Richard

這種樣式並不存在於演示css中，而是存在於演示頁面html頭標中。可能是因爲定製的目的。 – nik

經過更多的探索之後，我意識到site.css中有一些東西在做一些神奇的事情，沒有那些文件就沒有用。我把它剝離到最低限度（我不想要它，因爲它提示我自己的造型），並發現需要將子彈放在正確位置的零件。 – Richard

Nikhil的答案並沒有爲我工作，但它讓我更挖掘到CSS，並嘗試更多的東西。

我的問題是傳呼機根本沒有出現 - >它就像它被隱藏在圖像下。

最後，我將overflow: hidden設置爲overflow: visible，它的工作原理與廣告一樣。

來源

2014-03-17 17:59:33 Matt

我正在尋找一個適合年齡的解決方案。你的「設置溢出：隱藏溢出：可見」做的伎倆。非常感謝分享！ – Systembolaget

jQuery的cycle2尋呼機不工作

回答

相關問題