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 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 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>