jQuery Cycle Plugin應該很多人都用得很習慣了。只要是想要做幻燈片效果的，或是圖片動畫特效，一般來講我只會想到jQuery Cycle Plugin或是fancybox這兩種。jQuery Cycle Plugin算是非常好上手，步驟最簡單的不超過3步驟，就能達到效果:
先來個jQuery Cycle Plugin的連結 http://jquery.malsup.com/cycle/
然而今天再練習套用jQuery Cycle Plugin的時候發現了一個bug，關於圖片的bug，這個標題很難下，但說不定只有我有這個問題?!，看到這個問題還蠻訝異的，之前套用這個效果非常成功，但今天重新套用卻出了問題，在我的chrome console log 出現了[以下]這樣的問題。
了解一下整個html檔的狀況:
這段內容都沒有問題
首先一定要匯入jQuery.js <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
再來要匯入jQuery Cycle Plugin的js<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
然後貼上javascript
id為slidshow的div區塊套用fade的這個特效。
整個html頁面的程式碼如上，瀏覽時問題出現了，效果不但沒有起作用，而且還出現consolelog的問題:
順個這個log去看一下jquery.cycle.all.latest.js:28 第28行，很好，看不懂 = =
最後比對與之前做過的練習結果才發現問題在於img的width跟height的屬性，(當初還以為是圖片格式還是我的selector下錯。)
最後解決的方法是，被套用效果的該div標籤的img加上width="" 屬性跟 height=""屬性(其中一個有加就可以work)，就可以運作了。
可運作code:
-end
- link css跟js檔案
- 貼上javascript
- 加上要輪播照片的div 跟id img標籤。
先來個jQuery Cycle Plugin的連結 http://jquery.malsup.com/cycle/
然而今天再練習套用jQuery Cycle Plugin的時候發現了一個bug，關於圖片的bug，這個標題很難下，但說不定只有我有這個問題?!，看到這個問題還蠻訝異的，之前套用這個效果非常成功，但今天重新套用卻出了問題，在我的chrome console log 出現了[以下]這樣的問題。
[cycle] 1 - img slide not loaded, requeuing slideshow: http://127.0.0.1/myweb/images/20110914-03.jpg 0 0
行數 :/myweb/js/jquery.cycle.all.latest.js:28
了解一下整個html檔的狀況:
- 先來一段<head>標籤之前的內容:
<html>
<head>
<title>練習</title>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...source:http://jquery.malsup.com/cycle/basic.html
});
});
</script>
</head>
這段內容都沒有問題
首先一定要匯入jQuery.js <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
再來要匯入jQuery Cycle Plugin的js<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
然後貼上javascript
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...source:http://jquery.malsup.com/cycle/basic.html
});
});id為slidshow的div區塊套用fade的這個特效。
- 接下來來看div id="slideshow"的內容 :
<div id="container">
<div id="slideshow">
<img src="images/20110914-03.jpg" alt="照片slideshow" />
<img src="images/002.jpg" alt="照片slideshow" />
</div>
</div>
整個html頁面的程式碼如上，瀏覽時問題出現了，效果不但沒有起作用，而且還出現consolelog的問題:
最後比對與之前做過的練習結果才發現問題在於img的width跟height的屬性，(當初還以為是圖片格式還是我的selector下錯。)
最後解決的方法是，被套用效果的該div標籤的img加上width="" 屬性跟 height=""屬性(其中一個有加就可以work)，就可以運作了。
<img src="images/20110914-03.jpg" alt="照片slideshow" />
<img src="images/002.jpg" alt="照片slideshow" />可運作code:
<img src="images/20110914-03.jpg" alt="照片slideshow" width="500" height="200"/>
<img src="images/002.jpg" alt="照片slideshow" width="500" height="200"/>
//width跟height屬性，只要其中一個有就可以運作。-end
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD