Adaptor :: jQuery content slider
资源文件列表(大概)
Adaptor jQuery content slider/
-
Adaptor jQuery content slider/1.jpg
62.98KB
Adaptor jQuery content slider/css/
-
Adaptor jQuery content slider/css/config.rb
845B
Adaptor jQuery content slider/css/img/
-
Adaptor jQuery content slider/css/img/box-shadow.png
11.25KB
Adaptor jQuery content slider/css/img/next-prev-sprite-hover.png
9.01KB
Adaptor jQuery content slider/css/img/next-prev-sprite.png
5.51KB
Adaptor jQuery content slider/css/img/page-bg.png
1.2KB
Adaptor jQuery content slider/css/sass/
-
Adaptor jQuery content slider/css/sass/screen.scss
2.35KB
Adaptor jQuery content slider/css/sass/_base.scss
-
Adaptor jQuery content slider/css/screen.css
5.69KB
Adaptor jQuery content slider/css/style.css
1020B
Adaptor jQuery content slider/img/
-
Adaptor jQuery content slider/img/demo-mockup.psd
1.7MB
Adaptor jQuery content slider/img/finding-the-key.jpg
139.44KB
Adaptor jQuery content slider/img/hiding-the-map.jpg
108.78KB
Adaptor jQuery content slider/img/lets-get-out-of-here.jpg
124.54KB
Adaptor jQuery content slider/img/the-battle.jpg
99.92KB
Adaptor jQuery content slider/img/theres-the-buoy.jpg
116.21KB
Adaptor jQuery content slider/index.html
4.97KB
Adaptor jQuery content slider/index.jpg
13.37KB
Adaptor jQuery content slider/js/
-
Adaptor jQuery content slider/js/box-slider-all.jquery.min.js
8.71KB
Adaptor jQuery content slider/js/box-slider.jquery.js
9.97KB
Adaptor jQuery content slider/js/effects/
-
Adaptor jQuery content slider/js/effects/box-slider-fx-blinds.js
3.82KB
Adaptor jQuery content slider/js/effects/box-slider-fx-fade.js
1.04KB
Adaptor jQuery content slider/js/effects/box-slider-fx-scroll-3d.js
5.58KB
Adaptor jQuery content slider/js/effects/box-slider-fx-scroll.js
2.31KB
Adaptor jQuery content slider/js/lib/
-
Adaptor jQuery content slider/js/lib/jquery-1.7.2.min.js
92.62KB
Adaptor jQuery content slider/js/lib/modernizr.min.js
6.66KB
Adaptor jQuery content slider/test/
-
Adaptor jQuery content slider/test/index.html
1.44KB
Adaptor jQuery content slider/test/jasmine-1.2.0/
-
Adaptor jQuery content slider/test/jasmine-1.2.0/jasmine-html.js
18.62KB
Adaptor jQuery content slider/test/jasmine-1.2.0/jasmine.css
6.29KB
Adaptor jQuery content slider/test/jasmine-1.2.0/jasmine.js
67.03KB
Adaptor jQuery content slider/test/jasmine-1.2.0/MIT.LICENSE
1.04KB
Adaptor jQuery content slider/test/spec/
-
Adaptor jQuery content slider/test/spec/box-slider.js
2.63KB
资源内容介绍
Adaptor :: jQuery content slider <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Adaptor :: jQuery content slider</title> <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'><link href="css/screen.css" rel="stylesheet"> <script src="js/lib/modernizr.min.js"></script></head><body> <div id="page"> <section> <header> <hgroup> <h1>Adaptor</h1> <h2>jQuery content slider</h2> </hgroup> </header> <div id="viewport-shadow"> <a href="#" id="prev" title="go to the next slide"></a> <a href="#" id="next" title="go to the next slide"></a> <div id="viewport"> <div id="box"> <figure class="slide"> <img src="img/the-battle.jpg"> </figure> <figure class="slide"> <img src="img/hiding-the-map.jpg"> </figure> <figure class="slide"> <img src="img/theres-the-buoy.jpg"> </figure> <figure class="slide"> <img src="img/finding-the-key.jpg"> </figure> <figure class="slide"> <img src="img/lets-get-out-of-here.jpg"> </figure> </div> </div> <div id="time-indicator"></div> </div> <footer> <nav class="slider-controls"> <ul id="controls"> <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li> <li><a class="goto-slide" href="#" data-slideindex="1"></a></li> <li><a class="goto-slide" href="#" data-slideindex="2"></a></li> <li><a class="goto-slide" href="#" data-slideindex="3"></a></li> <li><a class="goto-slide" href="#" data-slideindex="4"></a></li> </ul> </nav> </footer> </section> <aside id="effect-switcher"> <h2>Select effect</h2> <ul id="effect-list"> <li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li> <li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li> <li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li> <li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li> <li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li> <li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li> <li><a href="#" class="effect" data-fx="fade">Fade</a></li> </ul> </aside> <footer id="credits"> <p>from:<a href="http://www.philparsons.co.uk" target="_blank">Phil Parsons</a> web:<a href="http://www.htmldivcss.com/" target="_blank">htmldivcss.com</a> thank:<a href="http://www.davehillphoto.com/" target="_blank">Dave Hill</a></p> <p>{download}</p> <p>{content}</p> <p>{google_729x90}</p> </footer> </div><script src="//code.jquery.com/jquery-1.7.2.min.js"></script> <script>window.jQuery || document.write('<script src="js/lib/jquery-1.7.2.min.js"><\/script>')</script><script src="js/box-slider-all.jquery.min.js"></script><script> $(function () { var $box = $('#box') , $indicators = $('.goto-slide') , $effects = $('.effect') , $timeIndicator = $('#time-indicator') , slideInterval = 5000; var switchIndicator = function ($c, $n, currIndex, nextIndex) { $timeIndicator.stop().css('width', 0); $indicators.removeClass('current').eq(nextIndex).addClass('current'); }; var startTimeIndicator = function () { $timeIndicator.animate({width: '680px'}, slideInterval); }; // initialize the plugin with the desired settings $box.boxSlider({ speed: 1000 , autoScroll: true , timeout: slideInterval , next: '#next' , prev: '#prev' , pause: '#pause' , effect: 'scrollVert3d' , blindCount: 15 , onbefore: switchIndicator , onafter: startTimeIndicator }); startTimeIndicator(); // pagination isn't built in simply because it's easy to // roll your own with the plugin API methods $('#controls').on('click', '.goto-slide', function (ev) { $box.boxSlider('showSlide', $(this).data('slideindex')); ev.preventDefault(); }); $('#effect-list').on('click', '.effect', function (ev) { var $effect = $(this); $box.boxSlider('option', 'effect', $effect.data('fx')); $effects.removeClass('current'); $effect.addClass('current'); switchIndicator(null, null, 0, 0); ev.preventDefault(); }); });</script></body></html>