1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
6 <script src="Scripts/jquery-ui-1.10.4.custom.js"></script>
7 <style>
8 html, body, img, ul, p {
9 margin: 0;
10 padding: 0;
11 }
12
13 body {
14 }
15
16 .content {
17 position: fixed;
18 height: 100%;
19 width: 100%;
20 }
21
22 .img {
23 height: 100%;
24 width: 100%;
25 position: relative;
26 }
27
28 .img img {
29 position: absolute;
30 top: 50%;
31 left: 50%;
32 }
33
34 .info {
35 position: fixed;
36 z-index: 999;
37 background: #000;
38 color: #fff;
39 left: 50%;
40 top: 50%;
41 }
42
43
44 .super-slider {
45 height: 100%;
46 width: 100%;
47 margin: 0;
48 padding: 0;
49 position: relative;
50 overflow: hidden;
51 }
52
53 .super-slider .super-content li {
54 display: block;
55 height: 100%;
56 width: 100%;
57 overflow: hidden;
58 position: absolute;
59 }
60
61 .super-slider .super-content li img {
62 width: 100%;
63 border: 0;
64 }
65
66 .super-content li > span {
67 position: absolute;
68 line-height: 1.5;
69 background: rgba(0,0,0,0.5);
70 bottom: 12px;
71 left: 0;
72 color: #fff;
73 padding: 0px;
74 width: 100%;
75 z-index: 999;
76 }
77
78 .sp-slider-text {
79 padding: 20px;
80 display: block;
81 }
82
83 .super-nav {
84 width: 20px;
85 display: block;
86 position: absolute;
87 right: 20px;
88 top:45%;
89 z-index: 999;
90 }
91
92 .super-nav li {
93 list-style: none;
94 display: block;
95 height: 20px;
96 width:20px;
97 background: #ccc;
98 border-radius:50%;
99
100 margin:5px;
101
102 }
103
104 .super-nav li:hover {
105 background: #aaa !important;
106 }
107
108 .super-nav li.selected {
109 background: #aaa;
110 }
111
112 .super-nav li:last-child {
113 border-right: 0;
114 }
115 </style>
116
117
118 <script>
119
120 ; (function ($) {
121 "use strict"
122 $.fn.superSlider = function (options) {
123
124 var setting = $.extend({
125 bars: ".super-nav",
126 items: ".super-content li",
127 speed: 3000
128 }, options);
129
130 var $_self = this,
131 $items = $(setting.items, $_self),
132 $bars = $(setting.bars, $_self),
133 count = 0,
134 sliterTimer = null,
135 bars = [],
136 itemCount = $items.length,
137 width = $(window).width();
138
139 for (var i = 0 ; i < itemCount; i++) {
140 bars.push("<li></li>");
141 }
142
143 $bars.html(bars.join(" "));
144 var $barItems = $bars.find("li");
145
146 $barItems.eq(0).addClass("selected");
147 $items.css({ left: width }).eq(0).css({ left: 0 });
148
149 var _start = function () {
150 sliterTimer = setInterval(function () {
151
152 console.log(count);
153 $barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)');
154
155 $items.eq(count % itemCount).removeClass("selected").stop().animate({
156 left: -$(window).width()
157 }, function () {
158 $items.css({ left: $(window).width(), "z-index": -1 });
159
160 var next = count % itemCount;
161 if (next == itemCount - 1) next = 0;
162 $items.eq(next).css({ "z-index": 1 });
163 });
164
165 $barItems.eq(count % itemCount).removeClass("selected").stop().animate({
166 backgroundColor: "rgba(220, 142, 34, 0.5)"
167 });
168
169 count++;
170
171 $items.eq(count % itemCount).css({ "z-index": 1 }).addClass("selected").stop().animate({
172 left: 0
173 });
174
175 $barItems.eq(count % itemCount).addClass("selected").stop().animate({
176 backgroundColor: "rgba(220, 142, 34,1)"
177 });
178
179 count = count % 100;
180
181 }, setting.speed);
182 }
183
184 var _stop = function () {
185 window.clearInterval(sliterTimer);
186 sliterTimer = null;
187 }
188
189 $barItems.on("click", function () {
190
191 if (count == $(this).index()) return;
192
193 $barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)');
194 $(this).css('background-color', 'rgba(220, 142, 34,1)');
195 count = $(this).index();
196 var next = count + 1;
197 if (next == itemCount) next = 0;
198 $items.siblings().css("z-index", "-1");
199 $items.eq(next).css("z-index", "99");
200
201 $items.each(function (i) {
202 if (i != count) {
203 $items.eq(i).stop().animate({
204 left: -$(window).width()
205 }, 300, function () {
206 $(this).css({ left: $(window).width() });
207 });
208 }
209 });
210
211 $items.eq(count).stop().animate({
212 left: 0
213 }, 300);
214
215 });
216
217 $_self.start = _start;
218 $_self.stop = _stop;
219 $barItems.on("mouseenter", _stop).on("mouseleave", _start);
220 return this;
221 };
222
223 })(jQuery);
224
225 ; (function ($) {
226 "use strict"
227 $.fn.responseImg = function (options) {
228
229 var _cfg = $.extend({
230 width: 1920,
231 height: 1080
232 }, options);
233
234 return this.each(function () {
235
236 var $_self = $(this),
237 winWidth = $(window).width(),
238 winHeight = $(window).height();
239
240 var _resetImgSize = function () {
241
242 winWidth = $(window).width();
243 winHeight = $(window).height();
244
245 var winWH = winWidth / winHeight;
246 var imgWH = _cfg.width / _cfg.height;
247
248 if (winWH > imgWH) {
249 $_self.width(winWidth);
250 $_self.height(winWidth * _cfg.height / _cfg.width);
251 } else {
252 $_self.height(winHeight);
253 $_self.width(winHeight * _cfg.width / _cfg.height);
254 }
255
256 var imgH = $_self.height();
257 var imgW = $_self.width();
258
259 $_self.css({ "margin-top": (-(imgH) / 2) + "px" });
260 $_self.css("margin-left", (-(imgW - 10) / 2) + "px");
261
262 $(".info").text(winWidth + "----" + winHeight + "dddd");
263
264 };
265
266 $(window).resize(_resetImgSize);
267
268 $_self.resize = _resetImgSize;
269
270 });
271
272 };
273 })(jQuery);
274
275
276 $(function () {
277
278 $("img").responseImg({
279 width: 1920,
280 height: 1080,
281 selector: 'img1'
282 }).resize();
283
284 $(".super-slider").superSlider({ speed: 3000 }).start();
285
286 });
287 </script>
288 </head>
289 <body>
290 <div id="info" class="info">
291 asdasd
292 </div>
293 <div class="content">
294 <div class="img">
295 <div class="super-slider">
296 <ul class="super-nav">
297 <li></li>
298 <li></li>
299 <li class="selected"></li>
300 <li></li>
301 <li></li>
302 <li></li>
303 </ul>
304 <ul class="super-content">
305 <li>
306 <span><span class="sp-slider-text">This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.</span></span>
307 <img src="http://creativewebsites.me/pageAnimate/images/slide1.jpg" />
308 </li>
309 <li>
310 <span><span class="sp-slider-text">This is a content.2</span></span>
311 <img src="http://creativewebsites.me/pageAnimate/images/slide2.jpg" />
312 </li>
313 <li>
314 <span><span class="sp-slider-text">This is a content.3</span></span>
315 <img src="http://creativewebsites.me/pageAnimate/images/slide3.jpg" />
316 </li>
317 <li>
318 <span><span class="sp-slider-text">This is a content.4</span></span>
319 <img src="http://creativewebsites.me/pageAnimate/images/slide4.jpg" />
320 </li>
321 <li>
322 <span><span class="sp-slider-text">This is a content.6</span></span>
323 <img src="http://creativewebsites.me/pageAnimate/images/slide6.jpg" />
324 </li>
325 </ul>
326 </div>
327 </div>
328 </div>
329
330 </body>
331 </html>
