帮助你生成翻页效果的jQuery插件 – bookblock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="bb-bookblock">
	<div>
		<a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt="image01"/></a>
	</div>
	<div>
		<a href="http://www.gbin1.com"><img src="images/animals/b.jpg" alt="image02"/></a>
	</div>
	<div>
		<a href="http://www.gbin1.com"><img src="images/animals/c.jpg" alt="image03"/></a>
	</div>
	<div>
		<a href="http://www.gbin1.com"><img src="images/animals/d.jpg" alt="image04"/></a>
	</div>
	<div>
		<a href="http://www.gbin1.com"><img src="images/animals/e.jpg" alt="image05"/></a>
	</div>
	<div>
		<a href="http://www.gbin1.com"><img src="images/animals/f.jpg" alt="image05"/></a>
	</div>
</div>

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

$(function() {
 
	var Page = (function() {
 
		var config = {
				$bookBlock: $( '#bb-bookblock' ),
				$navNext	: $( '#bb-nav-next' ),
				$navPrev	: $( '#bb-nav-prev' ),
				$navJump	: $( '#bb-nav-jump' ),
				bb				: $( '#bb-bookblock' ).bookblock( {
					speed				: 800,
					shadowSides	: 0.8,
					shadowFlip	: 0.7
				} )
			},
			init = function() {
 
				initEvents();
 
			},
			initEvents = function() {
 
				var $slides = config.$bookBlock.children(),
						totalSlides = $slides.length;
 
				// add navigation events
				config.$navNext.on( 'click', function() {
 
					config.bb.next();
					return false;
 
				} );
 
				config.$navPrev.on( 'click', function() {
 
					config.bb.prev();
					return false;
 
				} );
 
				config.$navJump.on( 'click', function() {
 
					config.bb.jump( totalSlides );
					return false;
 
				} );
 
				// add swipe events
				$slides.on( {
 
					'swipeleft'		: function( event ) {
 
						config.bb.next();
						return false;
 
					},
					'swiperight'	: function( event ) {
 
						config.bb.prev();
						return false;
 
					}
 
				} );
 
			};
 
			return { init : init };
 
	})();
 
	Page.init();
 
});