Home » jQuery 外掛

[jQ]jqGalScroll 2.1

[ 日期： | 瀏覽：6,970 | 迴響：13 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

jqGalScroll 2.1

比較常見的圖片或是畫作展示是用 Flash 來開發的，透過 Flash 能做出較多的換頁等的效果。但是現在已經有很多網友透過 JavaScript 來開發各種不同的 Photo Gallery 的套件了，jqGalScroll 就是其中一種基於 jQuery 的 Photo Gallery 套件。

套件名稱：jqGalScroll
套件版本：2.1
作者網站：http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/
套件網址：http://plugins.jquery.com/project/jqGalScroll
發佈日期：2008-03-29
檔案大小：5.71 KB
檔案下載：jqgalscroll.js jqGalScroll.css
引用檔案：jquery.easing.1.3.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ease(選填)
描述： 切換時的動畫效果，需參考引用 jquery.easing.1.3.js
預設值： null
 
speed(選填)
描述： 切換時的速度(毫秒)
預設值： 0
 
height(選填)
描述： 影像區塊的高
預設值： 500
 
width(選填)
描述： 影像區塊的寬
預設值： 500
 
titleOpacity(選填)
描述： 影像標題的透明度，標題是指影像中的 alt 屬性
預設值： .60
 
direction(選填)
描述： 切換時的移動方向，可選用的值有 'vertical'(垂直)、'horizontal'(水平) 及 'diagonal'(斜對角)
預設值： 'horizontal'

方法說明：

檢視原始碼 JavaScript
1
2

// 建立 jqGalScroll 效果
$(selector).jqGalScroll([options]);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<link rel="stylesheet" type="text/css" href=jqGalScroll.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqgalscroll.js"></script>
<script type="text/javascript">
	$(function(){
		// 設定 speep、height、width、titleOpacity 及 direction
		$('#naruto').jqGalScroll({
			speed: 1000,
			height: 568,
			width: 400,
			titleOpacity: .70
		});
	});
</script>
 
<body>
	<ul id="naruto">
		<li><img src="comic/0.png" alt="第一頁" /></li>
		<li><img src="comic/1.png" alt="第二頁" /></li>
		<li><img src="comic/2.png" alt="第三頁" /></li>
		<li><img src="comic/3.png" alt="第四頁" /></li>
		<li><img src="comic/4.png" alt="第五頁" /></li>
		<li><img src="comic/5.png" alt="第六頁" /></li>
		<li><img src="comic/6.png" alt="第七頁" /></li>
		<li><img src="comic/7.png" alt="第八頁" /></li>
		<li><img src="comic/8.png" alt="第九頁" /></li>
		<li><img src="comic/9.png" alt="第十頁" /></li>
		<li><img src="comic/10.png" alt="第十一頁" /></li>
		<li><img src="comic/11.png" alt="第十二頁" /></li>
		<li><img src="comic/12.png" alt="第十三頁" /></li>
		<li><img src="comic/13.png" alt="第十四頁" /></li>
		<li><img src="comic/14.png" alt="第十五頁" /></li>
		<li><img src="comic/15.png" alt="第十六頁" /></li>
		<li><img src="comic/16.png" alt="第十七頁" /></li>
		<li><img src="comic/17.png" alt="第十八頁" /></li>
	</ul>
</body>

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

附註：
在使用時，請遵循著 UL > LI > IMG 的架構來放置各種 HTML 元素。

13 筆針對 [jQ]jqGalScroll 2.1 的迴響

    • 自動輪播其實只要知道怎樣去控制它做切換就可以了
      上面新增了一個自動輪播的範例, 可以參考看看

  2. 大大果然是高手呵呵....我原本只想學ext而以是看到大大的功力而小小學jQuery呵呵...ext除了華麗小勝jQuery其他都好像比不過~_~ 好難決定哦...不過因該只會學常用到的..因為還有java和php主力在學...

  3. 對於版權jQuery因該和ext一樣吧@@?就是如果是用在商業上的話是不能拿作產品賣其他的因該ok吧@@?

    • jQuery 跟 ExtJs 兩者的開發理念是有差異的..並沒有誰比較好

      jQuery 基本上是有 GPL 跟 MIT 兩種宣告的；
      如果採用 MIT 的話，那麼只要保留原始的著作權聲明..
      至於程式要怎麼改應該都是沒問題的..當然用在商業專案中也可以

      可參考：http://docs.jquery.com/Licensing

發表迴響