Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》

1

2

3

4

5

6

7

8

9

10

11

12

13

<script src="jquery.js"></script>

<script src="dist/responsive-carousel.min.js"></script>

<link href="src/responsive-carousel.css"
rel="stylesheet">

<link href="src/responsive-carousel.slide.css"
rel="stylesheet">

<div class="carousel"
data-transition="slide">

    <div>

        <!-- carousel item content here -->

    </div>

    <div>

        <!-- carousel item content here -->

    </div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

$(document).ready(function() {

    /* basic - default settings */

    $(‘.iosSlider‘).iosSlider();

    /* some custom settings */

    $(‘.iosSlider‘).iosSlider({

        snapToChildren: true,

        scrollbar: true,

        scrollbarHide: false,

        desktopClickDrag: true,

        scrollbarLocation: ‘bottom‘,

        scrollbarHeight: ‘6px‘,

        scrollbarBackground: ‘url(_img/some-img.png) repeat 0 0‘,

        scrollbarBorder: ‘1px solid #000‘,

        scrollbarMargin: ‘0 30px 16px 30px‘,

        scrollbarOpacity: ‘0.75‘,

        onSlideChange: changeSlideIdentifier

    });

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id="bb-bookblock"
class="bb-bookblock">

    <div class="bb-item">

        <!-- custom content -->

    </div>

    <div class="bb-item">

        <!-- ... -->

    </div>

    <div class="bb-item">

        <!-- ... -->

    </div>

    <div class="bb-item">

        <!-- ... -->

    </div>

    <!-- ... -->

</div>

$(function() {

    $( ‘#bb-bookblock‘
).bookblock();

});

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

<div class="slider-viewport"><!-- works as a viewport for
the 3D transitions -->

  <div id="content-box"><!-- the 3d box -->

    <figure><!-- slide -->

      <img src="img/slide-1.png">

      <figcaption>This is slide one‘s description</figcaption>

    </figure>

    <figure>

      <img src="img/slide-2.png">

      <figcaption>This is slide two‘s description</figcaption>

    </figure>

    <figure>

      <img src="img/slide-3.png">

      <figcaption>This is slide three‘s description</figcaption>

    </figure>

    <figure class="slide">

      <img src="img/slide-4.png">

      <figcaption>This is slide four‘s description</figcaption>

    </figure>

  </div>

</div>

<script>

    $(function(){

        $(‘#content-box‘).boxSlider( /* options */
);

    });

</script>

1

2

3

4

5

6

7

8

9

10

11

12

<div id="carousel">

    <img src="flowers/tulip.jpg"
alt="a tulip"/>

    <img src="flowers/rose.jpg"
alt="a rose"/>

    <img src="flowers/daisy.jpg"
alt="a daisy"/>

    <img src="flowers/sunflower.jpg"
alt="a sunflower"/>

    <img src="flowers/pansy.jpg"
alt="a pansy"/>

</div>

<script type="text/javascript">

    jQuery(function($) {

        $( "#carousel"
).rcarousel( {width: 200, height: 200} );

    });

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$(".rslides").responsiveSlides({

  auto: true,             // Boolean: Animate automatically, true or false

  speed: 500,            // Integer: Speed of the transition, in milliseconds

  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds

  pager: false,           // Boolean: Show pager, true or false

  nav: false,             // Boolean: Show navigation, true or false

  random: false,          // Boolean: Randomize the order of the slides, true or false

  pause: false,           // Boolean: Pause on hover, true or false

  pauseControls: true,    // Boolean: Pause when hovering controls, true or false

  prevText: "Previous",   // String: Text for the "previous" button

  nextText: "Next",       // String: Text for the "next" button

  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels

  navContainer: "",       // Selector: Where controls should be appended to, default is after the ‘ul‘

  manualControls: "",     // Selector: Declare custom pager navigation

  namespace: "rslides",   // String: Change the default namespace used

  before: function(){},   // Function: Before callback

  after: function(){}     // Function: After callback

});