Responsiveslides.js The most lightweight slide plug-in

Summary: Responsiveslides.js is a lightweight, responsive jquery slide plug-in that shows images in the same container it supports almost all browsers including IE6, and supports the maximum width attribute in IE6, but is not natively supported in other browsers.

Responsiveslides.js is a lightweight, responsive jquery slide plug-in that shows pictures in the same container (tiny responsive slideshow jquery plugin). It supports almost all browsers, including IE6, and supports the maximum width attribute in IE6, but is not natively supported in other browsers. All you need to do is link jquery and crop the image to the same size.

You can click on the link or picture to see the effect

Maximum features compared to other slide show plugins:

1. Smaller file size (only 792 bytes by reduction and GZ compression)

2. Simple function (R.js only supports two modes: The picture automatically fades in and uses the page number label to manually switch the picture. )

Usage:

First step: Add a link

1. <script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></ Script>
2. <script src="Responsiveslides.min.js"></script>

Step Two: Add tags

2. <div id="slides">
4. <img src="1.jpg" alt= "" />
6. <img src="2.jpg" alt= "" />
8. <img src="3.jpg" alt= "" />
10. </div>

Step three: Link up the slide (Hook up the slideshow)

1. <script>
2. $ (function () {
3. $ ("#slides"). Responsiveslides ();
4. });
5. </Script>

Fourth Step: Customizing settings

1. $ ("#slides"). Responsiveslides ({
2. speed:4000,//integer: Slide transition interval, Unit is MS
3. fade:1000,//integer: Fade in time, in milliseconds
4. Auto:true,//Boolean type: Whether to manually switch pictures ("Auto:false" automatically adds page labels)
5. maxwidth:800,//integer: The maximum width of the slide and picture area, in pixels px
6. Namespace: ' rs '//string: Modify the default namespace for slide classes and IDs (for example, if you want to add multiple slides to a page)
7. });

If you don't need the page number property, it's done!

Example of modifying the property "Auto:false" (Display page number label) Effect:

You can click on the link or picture to see the effect

The following browsers have passed the test:

Internet Explorer 6,7,8,9

Firefox 2,3,6,8

Safari 5

Chrome 15

Opera 11.5

iOS Safari

Opera Mobile 10.1

Opera Mini for IOS

IE7 Mobile

Firefox Mobile

Android Browser

Kindle Browser

(Copy, record every day!!!!) ）

Responsiveslides.js The most lightweight slide plug-in