jQuery-Rotator/example.html at master · ChangKhao/jQuery-Rotator · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Rotator</title>

		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript" src="jquery.rotate.js"></script>
		<script type="text/javascript">
			$(function(){
				/* I sped up the delay just for testing purposes */
				$('#rotator').rotate({delay:800});

				/* just a simple call commented out but a quick and easy way to get stuff moving */
				/* $('#rotator').rotate(); */
			});
		</script>

	</head>
	<body>
		<div id="rotator">
		    <div style="display:block;"><img src="http://placehold.it/960x250" /></div>
		    <div><img src="http://placehold.it/960x250/ff0000" /></div>
		    <div><img src="http://placehold.it/960x250/00ff00" /></div>
		    <div><img src="http://placehold.it/960x250/0000ff" /></div>
		</div>


		<style type="text/css">
			#rotator {
				background:url();
				width:960px;
				height:250px;
				margin:0 auto;
				position:relative;
			}

			#rotator > div {
				display:none;
				position:absolute;
				top:0;
				left:0;
			}

			#rotator #banner_selector_wrap {
				position:absolute;
				bottom:13px;
				left:24px;
				z-index:99;
			}

			#rotator #banner_selector_wrap .banner_selector {
				display:inline-block;
				width:18px;
				height:18px;
				text-align:center;
				color:white;
				overflow:hidden;
				float:left;
				margin-left:5px;
				cursor:pointer;
				background:red;
			}
			#rotator #banner_selector_wrap .banner_selector.active {
				background:purple;
			}
		</style>
	</body>
</html>