一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器
基于HTML5和CSS的焦点图特效，梅花图案的背景很有中国特色，而且还会动哦，效果超炫，推荐下载！
演示图
html代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <meta name="keywords" content="一个酷炫的，基于HTML5和Css的焦点图特效，兼容各种浏览器" /> 6 <meta name="description" content="一个酷炫的，基于HTML5和Css的焦点图特效，兼容各种浏览器" /> 7 <title>一个酷炫的，基于HTML5和Css的焦点图特效，兼容各种浏览器</title> 8 <link href="css/slider.css" rel="stylesheet" type="text/css" /> 9 <!--[if lt IE 9]><script src="js/html5.js"></script><![endif]--> 10 <!--[if IE 6]> 11 <script type="text/javascript" src="js/DD_belatedPNG.js"></script> 12 <script>DD_belatedPNG.fix('*');</script> 13 <![endif]--> 14 <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script> 15 <script type='text/javascript' src='js/common.js'></script> 16 <script type='text/javascript' src='js/slider.js'></script> 17 </head> 18 <body> 19 <header> 20 <div class="header-content home"> 21 <div class="parallax-bg" id="slider-wrap"> 22 <div class="slider parallax-bg" id="slider"> 23 <div class="slider-sections sandbox"> 24 <section class="first"> <img alt="Kendo UI" src="images/home-banner-1.png"/> 25 <div class="text"> 26 <h2>SmartSite Ver 2.2<br /> 27 智能网站管理系统 </h2> 28 <p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p> 29 <p class="button"><a href="http://www.cnblogs.com/">Download</a> <a class="dimmed" href="http://www.cnblogs.com/">Learn More</a></p> 30 </div> 31 </section> 32 <section> <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" /> 33 <div class="text" style="padding-top: 10px;"> 34 <h2>企业网站管理系统</h2> 35 <p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城，在线支付、配送、支付方式管理、广告等模块。</p> 36 <p class="button"><a href="http://www.cnblogs.com/">Download</a> <a class="dimmed" href="http://www.cnblogs.com/">Learn More</a></p> 37 </div> 38 </section> 39 <section> <img src="images/home_banner_web-q2.png" alt="Kendo UI" /> 40 <div class="text"> 41 <h2>智能移动网站管理系统</h2> 42 <p class="copy">基于jquery.Mobile、HTML5技术框架，前后台完全分离，采用标签加模板技术，全站生成纯静态页。</p> 43 <p class="button"><a href="http://www.cnblogs.com/" >Download</a> <a class="dimmed" href="http://www.cnblogs.com/">Learn More</a></p> 44 </div> 45 </section> 46 </div> 47 </div> 48 <a class="slider-prev" href="javascript: void(0)"><</a> <a class="slider-next" href="javascript: void(0)">></a> </div> 49 </div> 50 </header> 51 </body> 52 </html>
JS代码
1 /** 2 * @author Alexander Farkas 3 * v. 1.22 4 */ 5 (function ($) 6 { 7 if (!document.defaultView || !document.defaultView.getComputedStyle) 8 { // IE6-IE8 9 var oldCurCSS = $.curCSS; 10 $.curCSS = function (elem, name, force) 11 { 12 if (name === 'background-position') 13 { 14 name = 'backgroundPosition'; 15 } 16 if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) 17 { 18 return oldCurCSS.apply(this, arguments); 19 } 20 var style = elem.style; 21 if (!force && style && style[name]) 22 { 23 return style[name]; 24 } 25 return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force); 26 }; 27 } 28 29 var oldAnim = $.fn.animate; 30 $.fn.animate = function (prop) 31 { 32 if ('background-position' in prop) 33 { 34 prop.backgroundPosition = prop['background-position']; 35 delete prop['background-position']; 36 } 37 if ('backgroundPosition' in prop) 38 { 39 prop.backgroundPosition = '(' + prop.backgroundPosition; 40 } 41 return oldAnim.apply(this, arguments); 42 }; 43 44 function toArray(strg) 45 { 46 strg = strg.replace(/left|top/g, '0px'); 47 strg = strg.replace(/right|bottom/g, '100%'); 48 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); 49 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 50 return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]]; 51 } 52 53 $.fx.step.backgroundPosition = function (fx) 54 { 55 if (!fx.bgPosReady) 56 { 57 var start = $.curCSS(fx.elem, 'backgroundPosition'); 58 if (!start) 59 {//FF2 no inline-style fallback 60 start = '0px 0px'; 61 } 62 63 start = toArray(start); 64 fx.start = [start[0], start[2]]; 65 var end = toArray(fx.end); 66 fx.end = [end[0], end[2]]; 67 68 fx.unit = [end[1], end[3]]; 69 fx.bgPosReady = true; 70 } 71 //return; 72 var nowPosX = []; 73 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 74 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 75 fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1]; 76 77 }; 78 })(jQuery); 79 80 81 82 /* 83 tlrkSlider 84 85 example usage: 86 87 $("#slider").tlrkSlider({ 88 autoStart: false, 89 elements: { 90 "img": {delay: 10}, 91 "h2": {delay: 500}, 92 ".copy": {delay: 800}, 93 ".button": {delay: 1000} 94 } 95 }); 96 97 to go to a specific frame: 98 $("#slider").tlrkSlider("go", position); 99 "position" can have one of the following values: 100 "next", "prev", "first", "last", "+1", "-1" or a numeric value 101 102 to start/stop the automatic loop: 103 $("#slider").tlrkSlider("start"); 104 $("#slider").tlrkSlider("stop"); 105 106 to change the delay between automatic transitions: 107 $("#slider").tlrkSlider("option", "delayAnimation", 1000); 108 109 to change any option: 110 $("#slider").tlrkSlider("option", option_name, option_value); 111 112 Changing the "elements" object is not tested. 113 114 Changing the following options: "navigation", "navigationClass", "framesSelector", "autoStart" won't have any effect for now. 115 They are used only during the initialization. 116 117 $("#slider").data("tlrkSlider") will return the plugin instance and the methods/properties can be accessed from there. 118 119 The plugin contructor defaults are accessable through TlrkSlider.defaults 120 121 The function that actually sweep the elements in/out can be overriden from 122 TlrkSlider.prototype._animationIn and TlrkSlider.prototype._animationOut 123 124 See sweepIn/sweepOut 125 126 */ 127 128 129 130 ;(function( $, window, document, undefined ){ 131 132 // utility function that generates the "dots" navigation 133 function generateNavigation($el, count, config) { 134 var i, html = "", 135 width = count * 24; 136 137 html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>"; 138 for (i = 0; i < count; i++) { 139 html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>"; 140 } 141 html += "</ol>"; 142 143 $el.append(html); 144 } 145 146 function sweepOut($el, windowWidth) { 147 var dfr = $.Deferred(), 148 pos = $el.position(), 149 width = $el.width(), 150 delta, final, 151 options = $el.data("tlrkAnimOptions"); 152 153 windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it 154 155 delta = windowWidth - pos.left; 156 final = -(delta); 157 158 setTimeout(function(){ 159 $el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){ 160 dfr.resolve(); 161 }); 162 }, options.delay); 163 164 return dfr.promise(); 165 } 166 167 function sweepIn($el, windowWidth, frameLeft) { 168 var dfr = $.Deferred(), 169 options = $el.data("tlrkAnimOptions"), 170 positionData = $el.data("tlrkOriginalPos"), 171 final = positionData.position.left, 172 rightEdge; 173 174 windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it 175 176 $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen 177 $el.css("left", function(current){ 178 return current + windowWidth - frameLeft; 179 }); 180 181 setTimeout(function(){ 182 $el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){ 183 dfr.resolve(); 184 }); 185 }, options.delay); 186 187 return dfr.promise(); 188 } 189 190 191 // two pass function that first iterates all the elements and gets their position/width/height 192 // and then sets their position to absolute 193 function absolutize($elements) { 194 195 // todo - move it to separate function and do it just once 196 // gather the original position/dimension data for all elements 197 $elements.each(function(){ 198 var $t = $(this); 199 200 if ($t.data("tlrkOriginalPos")) return 201 202 $t.data("tlrkOriginalPos", { 203 position: $t.position(), 204 width: $t.width(), 205 height: $t.height(), 206 css_pos: $t.css("position"), 207 css_left: $t.css("left"), 208 css_top: $t.css("top"), 209 css_width: $t.css("width") || "auto", 210 css_height: $t.css("height") || "auto" 211 }); 212 213 }); 214 215 // set the absolute position 216 $elements.each(function(){ 217 var $t = $(this), 218 opos = $t.data("tlrkOriginalPos"); 219 220 $t.css({ 221 position: "absolute", 222 left: opos.position.left, 223 top: opos.position.top, 224 width: opos.width, 225 height: opos.height 226 }); 227 }); 228 } 229 230 function restoreFrameElements($elements) { 231 $elements.each(function(){ 232 var $t = $(this), 233 opos = $t.data("tlrkOriginalPos"); 234 235 if (!opos) return 236 237 $t.css({ 238 position: opos.css_pos, 239 left: opos.css_left, 240 top: opos.css_top, 241 width: opos.css_width, 242 height: opos.css_height 243 }); 244 }); 245 246 } 247 248 var TlrkSlider = function( elem, options ){ 249 this.elem = elem; 250 this.$elem = $(elem); 251 this.options = options; 252 }; 253 254 // the plugin prototype 255 TlrkSlider.prototype = { 256 defaults: { 257 258 259 defaultElementOptions: { 260 speed: 1200, 261 easing: "easeInOutBack", 262 // interval before the element starts moving when the fadeIn/Out functions are called 263 // it's a good idea to give different delays for the different elements 264 // if all have the same delay they'll start moving all together 265 delay: 100 266 }, 267 268 // dispose elements are these that are not included in the elements object 269 // but affect the document flow and will be fadedIn/Out 270 disposeDelay: 100, // delay for the dispose elements 271 disposeSpeed: 1000, // how quickly they'll fadeOut/In 272 273 delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn 274 delayAnimation: 7000, // time between auto changing the current frame 275 276 loop: true, // if true when clicking next on the last frame the slider jumps to the first one 277 278 autoStart: true, // start the automatic looping through the frames on init 279 280 framesSelector: "section", // selector for the frames inside the slider 281 282 elements: { 283 "p": {delay: 100, speed: 1000, easing: "easeInOutBack"} 284 }, 285 286 navigation: true, // the dots navigation on the bottom 287 navigationClass: "slider-nav", 288 289 // callbacks 290 // another way to "catch" these events is with 291 // $(-slider-element-).bind("animationStart") 292 animationStart: null, 293 animationEnd: null 294 }, 295 296 init: function() { 297 var c, e, element, $element, 298 that = this, 299 $firstFrame; 300 301 c = this.config = $.extend({}, this.defaults, this.options); 302 303 this.elem.style.position = "relative"; // make the wrapping element relative 304 305 // basics 306 this.$frames = this.$elem.find(c.framesSelector); 307 this.framesCount = this.$frames.length; 308 this.currentFrame = 0; 309 this.queue = []; 310 311 this._$elementsByFrame = {}; 312 this._$disposeElementsByFrame = {}; 313 314 for (i = 0; i < this.framesCount; i++) { 315 this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame 316 this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame 317 } 318 319 if (c.navigation) { 320 generateNavigation(this.$elem, this.framesCount, c); 321 this.$navigation = this.$elem.find("."+c.navigationClass); 322 } 323 324 // bindings 325 this.$elem.find(".slider-nav").delegate("a", "click", function(e){ 326 var frame = this.getAttribute("href").split("#")[1]; 327 that.go.call(that, frame); 328 return false; 329 }); 330 331 this.$elem // internal bindings for the callbacks 332 .bind("animationStart", function(){ 333 if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);} 334 }) 335 .bind("animationEnd", function(){ 336 if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);} 337 }) 338 ; 339 340 // start animation? 341 if (c.autoStart) { 342 this.start(); 343 } else { 344 this.running = false; 345 } 346 347 return this; 348 }, 349 350 start: function(instant) { 351 var that = this; 352 353 if (this.timer) { // we'll clear the current timer 354 window.clearTimeout(this.timer); 355 } 356 357 this.running = true; 358 359 if (instant) { 360 that.nextFrame(); 361 } else { 362 this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation); 363 } 364 }, 365 366 stop: function() { 367 if (!this.running) return; // we are not running 368 369 this.running = false; 370 window.clearTimeout(this.timer); 371 }, 372 373 // main function for changing frames 374 selectFrame: function(frame, dfr) { 375 var c = this.config, // shorthand for the config 376 that = this, 377 dfr = dfr || $.Deferred(), 378 dFadeIn = $.Deferred(), 379 dFadeOut = $.Deferred(); 380 381 if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) { 382 dfr.reject(); 383 return dfr.promise(); 384 } 385 386 // clear the animation loop interval if the animation is running 387 if (this.running && this.timer) { 388 window.clearTimeout(this.timer); 389 } 390 391 // check if we are currenly running an animation. 392 if (this.animated && this.queue.length > 0) { 393 // wait for the last item in the queue to finish 394 this.queue[this.queue.length-1].done(function(){ 395 that.selectFrame(frame, dfr); // and call again the selectFrame 396 }) 397 return dfr.promise(); 398 } 399 400 this.animated = true; 401 this.$elem.trigger("animationStart", [this, frame]); 402 403 this.queue.push(dfr); 404 405 // fade the frames 406 dFadeOut = this._fadeOutFrame(this.currentFrame); 407 408 // hide the fadetout frame 409 dFadeOut.done(function(){ 410 that.$frames.eq(that.currentFrame).hide(); 411 }); 412 413 window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame 414 dFadeIn = that._fadeInFrame.call(that, frame).done(function(){ 415 // when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise 416 $.when(dFadeOut, dFadeIn).done(function(){ 417 that.animated = false; 418 that.queue.shift(); 419 that.$elem.trigger("animationEnd", [that]); 420 that.currentFrame = frame; 421 dfr.resolve(); 422 }); 423 }); 424 }, c.delayBetweenTransition); 425 426 // navigation html change 427 if (this.config.navigation) { 428 this.$navigation.find(".selected").removeClass("selected").end() 429 .find("a").eq(frame).addClass("selected"); 430 } 431 432 dfr.done(function(){ // we'll resume the loop animation after the transitions are done 433 if (that.running) { 434 that.start(); 435 } 436 }); 437 438 return dfr.promise(); 439 }, 440 441 _fadeFrame: function(frame, callback, direction) { 442 var dfr = $.Deferred(), 443 $frame = this.$frames.eq(frame), 444 $elements = this._$elementsByFrame[frame], 445 windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element 446 i, len, 447 that = this, 448 elementAnimations = [], 449 $disposeElements = this._$disposeElementsByFrame[frame], 450 $affectedElements, 451 frameLeft = $frame.offset().left; 452 453 direction = direction || "out"; 454 455 if (!$.isFunction(callback)) return; // do nothing if there's no callback passed 456 457 $affectedElements = $elements.add($disposeElements); 458 459 // position absolute the animation and dispose elements 460 absolutize($affectedElements); 461 462 // toggle the dispose elements 463 if ($disposeElements.length > 0) { 464 window.setTimeout(function(){ 465 $disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed); 466 }, this.config.disposeDelay); 467 } 468 469 // invoke the callback for each element 470 // the callback must return a promise 471 $elements.each(function(){ 472 elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) ); 473 }); 474 475 // wait for all the elements to finish their animation 476 $.when.apply(this, elementAnimations).done(function(){ 477 //restoreFrameElements($affectedElements); // and restore the elements' position 478 dfr.resolve(); // resolve the fade function 479 }); 480 481 return dfr.promise(); 482 }, 483 484 _fadeOutFrame: function(frame) { 485 var dfr = $.Deferred(), 486 $frame = this.$frames.eq(frame), 487 $disposeElements = this._$disposeElementsByFrame[frame]; 488 489 this._fadeFrame(frame, this._animationOut, "out").done(function(){ 490 dfr.resolve(); 491 }) 492 493 return dfr.promise(); 494 }, 495 496 _fadeInFrame: function(frame) { 497 var dfr = $.Deferred(), 498 $frame = this.$frames.eq(frame), 499 $elements = this._$elementsByFrame[frame]; 500 501 this._restoreFrame(frame); 502 503 $frame.show(); 504 505 this._fadeFrame(frame, this._animationIn, "in").done(function(){ 506 dfr.resolve(); 507 }); 508 509 return dfr.promise(); 510 }, 511 512 _restoreFrame: function(frame){ 513 if (!frame) return 514 restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) ); 515 }, 516 517 nextFrame: function() { 518 var frame = this.currentFrame+1, 519 dfr = $.Deferred(); 520 521 if (frame > this.framesCount-1) { 522 if (this.config.loop) { 523 frame = 0; 524 } else { 525 dfr.reject(); 526 } 527 }; 528 529 this.selectFrame(frame).done(function(){ 530 dfr.resolve(); 531 }); 532 533 return dfr.promise(); 534 }, 535 536 prevFrame: function() { 537 var frame = this.currentFrame-1, 538 dfr = $.Deferred(); 539 540 if (frame < 0) { 541 if (this.config.loop) { 542 frame = this.framesCount-1; 543 } else { 544 dfr.reject(); 545 return dfr.promise(); 546 } 547 } 548 549 this.selectFrame(frame).done(function(){ 550 dfr.resolve(); 551 }); 552 553 return dfr.promise(); 554 }, 555 556 go: function(str) { // shorthand 557 switch (str) { 558 case "next": 559 case "+1": 560 this.nextFrame(); 561 break; 562 563 case "prev": 564 case "-1": 565 this.prevFrame(); 566 break; 567 568 case "first": 569 this.selectFrame(0); 570 break; 571 572 case "last": 573 this.selectFrame(this.framesCount-1); 574 break; 575 576 default: 577 if (isNaN(str)) return; 578 this.selectFrame(Number(str)); 579 } 580 }, 581 582 // returns jquery collection of animation elements 583 _getFrameElements: function(frame) { 584 var $frame = this.$frames.eq(frame), 585 elements = this.config.elements, 586 e, elementOptions, 587 $found, $frameElements = $([]); 588 589 for (e in elements) { 590 elementOptions = elements[e]; 591 $found = $frame.find(e); 592 $found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions )); 593 $frameElements = $frameElements.add($found); 594 } 595 596 return $frameElements; 597 }, 598 599 // returns jquery collection of elements that have to be faded out 600 // i.e. elements on the same level as the animation elements 601 // that doesn't contain other animation elements 602 _getDisposeFrameElements: function(frame) { 603 var $disposeElements = $([]), 604 $frame = this.$frames.eq(frame), 605 $elements = this._$elementsByFrame[frame]; 606 607 $elements.each(function(){ 608 var $t = $(this), 609 $siblings = $t.siblings().not(".t-frame-element"); 610 611 $siblings.each(function(){ 612 var $t = $(this); 613 // check if the node is not already marked and doesn't contains other frame elements 614 if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) { 615 $t.addClass("t-frame-dispose"); 616 $disposeElements = $disposeElements.add($t); 617 } 618 }); 619 620 }); 621 return $disposeElements; 622 }, 623 624 625 // expose the internal animationIn/Out functions that are called for each element in the frame 626 // two arguments are passed - the $element which have to be animated and the window width 627 _animationIn: sweepIn, 628 _animationOut: sweepOut 629 630 } 631 632 TlrkSlider.defaults = TlrkSlider.prototype.defaults; 633 634 $.fn.tlrkSlider = function(options) { 635 var otherArgs = Array.prototype.slice.call(arguments, 1); 636 637 return this.each(function() { 638 var $el = $(this), 639 pluginData = $el.data("tlrkSlider"); 640 641 if (!pluginData) { // check if the slider is already attached 642 pluginData = new TlrkSlider(this, options).init(); 643 $el.data("tlrkSlider", pluginData); 644 return; 645 } 646 647 //change the options or call a method 648 if (typeof options === "string") { 649 650 // setting / getting option(s) 651 if (options === "option") { 652 653 if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value 654 pluginData.config[otherArgs[0]] = otherArgs[1]; 655 } 656 657 if (typeof otherArgs[0] === "object") { // extend the config with new options 658 pluginData.config = $.extend(pluginData.config, otherArgs[0]); 659 } 660 661 } else { // call a method? 662 try { 663 pluginData[options].apply(pluginData, otherArgs); 664 } catch(ex) { 665 throw "Error calling a plugin method (" + ex + ")"; 666 } 667 } 668 } 669 }); 670 }; 671 672 window.TlrkSlider = TlrkSlider; 673 674 })( jQuery, window , document ); 675 676 $(document).ready(function(){ 677 var $backgrounds = $(".header-content").find(".parallax-bg"), 678 LAYER_OFFSET = 30, 679 PRLX_SPEED = 1500, 680 $slider; 681 682 $slider = $("#slider").tlrkSlider({ 683 autoStart: true, 684 animationStart: function(ev, slider, step){ 685 var max_steps = this.framesCount; 686 $backgrounds.each(function(idx, el){ 687 var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx); 688 $(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED); 689 }); 690 }, 691 elements: { 692 "img": {delay: 10}, 693 "h2": {delay: 500}, 694 ".copy": {delay: 800}, 695 ".button": {delay: 1000} 696 } 697 }); 698 699 $(".header-content") 700 .hover( 701 function(){$(this).find(".slider-prev, .slider-next").show();}, 702 function(){$(this).find(".slider-prev, .slider-next").hide();} 703 ) 704 .find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end() 705 .find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; }); 706 707 });
喜欢的朋友，可以下载
