爲什麼在這個應用程序中破壞了JQuery Cycle Plugin？

我第一次玩過JQuery Cycle plugin，並試圖製作一個簡單的圖像幻燈片。大部分情況下，我遵循this gentleman's tutorial。我結束了這段代碼：爲什麼在這個應用程序中破壞了JQuery Cycle Plugin？

<head> 
<style> @import "main.css"; </style> 
    <script type="text/javascript" src="jquery-3.0.0.min.js"> </script> 
    <script type="text/javascript" src="jquery.cycle.all.js"> </script> 
    <script type="text/javascript"> 
    $('#slider').cycle({ 
    fx:  'scrollHorz', 
    speed: 'slow', 
    next: '#next', 
    prev: '#prev' 
    }); 
</script> 
</head> 
<body> 

<div id="picwrap"> 
<div id="piccont"> 

    <div id="prev" class="controller"> </div> 
    <div id="slider"> 
    <img src="pic1.png" /> 
    <img src="pic2.png" /> 
    <img src="pic3.png" /> 
    </div> 
    <div id="next" class="controller"> </div> 

</div> 
</div> 

</body>

相關的CSS如下：

#picwrap { 
    display: block; 
    height: 560px; 
    width: 580px; 
    margin: auto; 
} 

#piccont { 
    display: block; 
    float: left; 
    height: 560px; 
    width: 580px; 
    overflow: auto; 
} 

#prev { 
    background-image: url(arrow-left.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    height: 560px; 
    width: 100px; 
    float: left; 
    position: relative; 
    z-index: 99; 
} 

#next { 
    background-image: url(arrow-right.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    height: 560px; 
    width: 100px; 
    float: right; 
    position: relative; 
    z-index: 99; 
} 

#slider { 
    display: block; 
    height: 560px; 
    width: 580px; 
    float: left; 
    position: absolute; 
    overflow: hidden; 
}

劇本似乎並沒有被任何工作。我只能假設我犯了一個小小的錯誤，我正在努力注意。我已經多次與視頻進行交叉引用，並檢查了路徑和文件名。我在其他教程中也看過，並且找不到我做錯了什麼。看來插件的實現完全失敗了，因爲在添加腳本之前和之後，文件似乎沒有區別。我得到一個靜態圖像（圖片1）與兩個箭頭（這是不可點擊）的頂部。

任何幫助將不勝感激。

來源

2016-07-04 Placowdepuss

看來你的CSS不正確。在第一行它說'picWrap'，但如果我是正確的，它應該是'#picWrap'。大多數情況下，Cycle不會產生錯誤，但仍然不起作用，它在CSS中。

而且，把你的JS在底部（結束標記之前），並改變你的JS這樣的：

$(document).ready(function(){ 
    $('#slider').cycle({ 
     fx:  'scrollHorz', 
     speed: 'slow', 
     next: '#next', 
     prev: '#prev' 
    }); 
});

週期需要的圖像被下載才能計算出不同的幻燈片的大小。有時我甚至選擇使用$（window）.load而不是$（document）.ready。圖像完全加載後，窗口加載將執行。

來源

2016-07-04 19:34:30

非常感謝你，更改Javascript到你的版本解決了這個問題。至於CSS，說實話我只是一個業餘愛好者，並沒有意識到它有一個無處不在的案例慣例，我剛剛把它放在小寫字母中。丟失的散列只是一個格式錯誤，我已將它包含在我的代碼中。 – Placowdepuss

爲什麼在這個應用程序中破壞了JQuery Cycle Plugin？

回答

相關問題