https://slovo.odessa.ua/templates/Gemini_ua/js/jquery.imageScroller.js

1/*
2 * 
3 * ImageScroller - a Image Horizental Scroll Viewer 
4 * Version 0.1
5 * @requires jQuery v1.2.1
6 * 
7 * Copyright (c) 2007 Luan
8 * Email [email protected] 
9 * 
10 * Dual licensed under the MIT and GPL licenses:
11 * http://www.opensource.org/licenses/mit-license.php
12 * http://www.gnu.org/licenses/gpl.html
13 * 
14 * Example:
15 *   #viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
16 *   #viewerFrame {width:505px; clear:both; padding:0;}
17 *   #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
18 *   #viewer a {display:block; float:left; width:100px; height:100px;}
19 *   <script type="text/javascript">
20 *   $(function(){
21 *   	$("#viewer").imageScroller({
22 *   	next:"btn1",
23 *   	prev:"btn2",
24 *   	frame:"viewerFrame",
25 *   	width:100, 
26 *   	child:"a",
27 *   	auto:true
28 *   	});	 
29 *   });
30 *   </script>
31 *   <div id="viewer"><div id="viewerFrame">
32 *   <a href=""><img src="pre1.jpg"></a>
33 *   <a href=""><img src="pre2.jpg"></a>
34 *   <a href=""><img src="pre3.jpg"></a>
35 *   <a href=""><img src="pre4.jpg"></a>
36 *   <a href=""><img src="pre5.jpg"></a>
37 *   </div></div>
38 *   <span id="btn1">prev</span><br/><span id="btn2">next</span>   
39*/
40
41jQuery.fn.imageScroller = function(params){
42	var p = params || {
43		next:"buttonNext",
44		prev:"buttonPrev",
45		frame:"viewerFrame",
46		width:150,
47		child:"a",
48		auto:true
49	}; 
50	var _btnNext = $("#"+ p.next);
51	var _btnPrev = $("#"+ p.prev);
52	var _imgFrame = $("#"+ p.frame);
53	var _width = p.width;
54	var _child = p.child;
55	var _auto = p.auto;
56	var _itv;
57	
58	var turnLeft = function(){
59		_btnPrev.unbind("click",turnLeft);
60		if(_auto) autoStop();
61		_imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
62			_imgFrame.find(_child+":first").appendTo( _imgFrame );
63			_imgFrame.css("marginLeft",0);
64			_btnPrev.bind("click",turnLeft);
65			if(_auto) autoPlay();
66		});
67	};
68	
69	var turnRight = function(){
70		_btnNext.unbind("click",turnRight);
71		if(_auto) autoStop();
72		_imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
73		_imgFrame.css("marginLeft",-_width);
74		_imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
75			_imgFrame.find(_child+":last").remove();
76			_btnNext.bind("click",turnRight);
77			if(_auto) autoPlay(); 
78		});
79	};
80	
81	_btnNext.css("cursor","hand").click( turnRight );
82	_btnPrev.css("cursor","hand").click( turnLeft );
83	
84	var autoPlay = function(){
85	  _itv = window.setInterval(turnRight, 3000);
86	};
87	var autoStop = function(){
88		window.clearInterval(_itv);
89	};
90	if(_auto)	autoPlay();
91};