jquery.imageScroller.js
2.98 KB
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*
*
* ImageScroller - a Image Horizental Scroll Viewer
* Version 0.1
* @requires jQuery v1.2.1
*
* Copyright (c) 2007 Luan
* Email verycss-ok@yahoo.com.cn
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Example:
* #viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
* #viewerFrame {width:505px; clear:both; padding:0;}
* #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
* #viewer a {display:block; float:left; width:100px; height:100px;}
* <script type="text/javascript">
* $(function(){
* $("#viewer").imageScroller({
* next:"btn1",
* prev:"btn2",
* frame:"viewerFrame",
* child:"a",
* auto:true
* });
* });
* </script>
* <div id="viewer"><div id="viewerFrame">
* <a href=""><img src="pre1.jpg"></a>
* <a href=""><img src="pre2.jpg"></a>
* <a href=""><img src="pre3.jpg"></a>
* <a href=""><img src="pre4.jpg"></a>
* <a href=""><img src="pre5.jpg"></a>
* </div></div>
* <span id="btn1">prev</span><br/><span id="btn2">next</span>
*/
jQuery.fn.imageScroller = function(params) {
var p = params || {
next: "buttonNext",
prev: "buttonPrev",
frame: "viewerFrame",
child: "a",
auto: true
};
var _btnNext = $("#" + p.next);
var _btnPrev = $("#" + p.prev);
var _imgFrame = $("#" + p.frame);
var _child = p.child;
var _auto = p.auto;
var _itv;
var _i = _imgFrame.find(_child).length
var w_frame = _i*180
//console.log(_i);
//console.log(w_frame);
_imgFrame.width(w_frame)
if(_i <= 5){
_btnNext.children().hide();
_btnPrev.children().hide();
};
var turnLeft = function() {
if( _i > 5 ){
_btnPrev.unbind("click", turnLeft);
if (_auto) autoStop();
_imgFrame.animate({ marginLeft: -180 }, 'fast', '', function() {
_imgFrame.find(_child + ":first").appendTo(_imgFrame);
jQuery("#listBox").find("img:eq(5)").lazyload({
skip_invisible : false
});
_imgFrame.css("marginLeft", 0);
_btnPrev.bind("click", turnLeft);
if (_auto) autoPlay();
});
};
};
var turnRight = function() {
if( _i > 5 ){
_btnNext.unbind("click", turnRight);
if (_auto) autoStop();
_imgFrame.find(_child + ":last").clone().show().prependTo(_imgFrame);
_imgFrame.css("marginLeft", -180);
_imgFrame.animate({ marginLeft: 0 }, 'fast', '', function() {
_imgFrame.find(_child + ":last").remove();
jQuery("#listBox").find("img:eq(0)").lazyload({
skip_invisible : false
});
_btnNext.bind("click", turnRight);
if (_auto) autoPlay();
});
};
};
_btnNext.css("cursor", "hand").click(turnRight);
_btnPrev.css("cursor", "hand").click(turnLeft);
var autoPlay = function() {
_itv = window.setInterval(turnLeft, 5000);
};
var autoStop = function() {
window.clearInterval(_itv);
};
if (_auto) autoPlay();
};