Html
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Title> jQuery Tools standalone demo </title>
<! -- Include the Tools -->
<Script src = "http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"> </script>
<Link rel = "stylesheet" type = "text/css"
Href = "./tabs-slideshow.css"/>
</Head>
<Body> <! -- "Previous slide" button -->
<A class = "backward"> prev </a>
<! -- Container for the slides -->
<Div class = "images">
<! -- First slide -->
<Div>
<H3> First pane <P style = "font-weight: bold">
Aenean nec imperdiet ligula. Cum sociis natoque penatibus et
Magnis dis parturient montes, nascetur ridiculus mus.
</P>
<P>
Suspendisse potenti. Sed elementum risus eleifend massa
Vestibulum consectetur. Duis massa augue, aliquam eget fringilla
Vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque,
Dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis
Ligula in ligula faucibus cursus. Quisque vulputate pellentesque
Facilisis.
</P>
</Div>
<! -- Second slide -->
<Div>
<H3> Second pane <P style = "font-weight: bold">
Consectetur adipiscing elit. Praesent bibendum eros ac
Nulla. Integer vel lacus ac neque viverra.
</P>
<P>
Vivamus euismod sagittis. Etiam cursus neque non lectus
Mattis cursus et a libero. Vivamus condimentum hendrerit metus,
A sollicitudin magna vulputate eu. Donec sed tincidunt
Lectus. Donec tellus lectus, fermentum sit amet porta non,
Rhoncuac mi. Quisque placerat auctor justo, a egestas urna
Tincidunt eleifend.
</P>
</Div>
<! -- Third slide -->
<Div>
<H3> Third pane <P style = "font-weight: bold">
Non lectus lacinia egestas. Nulla hendrerit, felis quis
Elementum viverra, purus felis egestas magna.
</P>
<P>
Aenean elit lorem, presponvitae dictum in, fermentum consequat
Dolor. Proin consectetur sollicitudin tellus, non elementum
Turpis pharetra non. Sed quis tellus quam.
</P>
</Div>
</Div>
<! -- "Next slide" button -->
<A class = "forward"> next </a>
<! -- The tabs -->
<Div class = "slidetabs">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div style = "clear: both; margin: 30px 0 0; text-align: center;">
<Button onClick = '$ (". slidetabs"). data ("slideshow"). play ();'> Play </button>
<Button onClick = '$ (". slidetabs"). data ("slideshow"). stop ();'> Stop </button>
</Div>
<Script language = "JavaScript">
$ (Function (){
$ (". Slidetabs"). tabs (". images> div ",{
// Enable "cross-fading" effect
Effect: 'fade ',
FadeOutSpeed: "slow ",
// Start from the beginning after the last tab
Rotate: true
// Use the slideshow plugin. It accepts its own configuration
}). Slideshow ();
});
</Script>
</Body>
</Html>
CssCopy codeThe Code is as follows:/* container for slides */
. Images {
Background: # fff repeat-x;
Border: 1px solid # ccc;
Position: relative;
Height: 300px;
Width: 560px;
Float: left;
Margin: 15px;
Cursor: pointer;
/* CSS3 tweaks for modern browsers */
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
-Moz-box-shadow: 0 0 25px #666;
-Webkit-box-shadow: 0 0 25px #666;
}
/* Single slide */
. Images div {
Display: none;
Position: absolute;
Top: 0;
Left: 0;
Margin: 7px;
Padding: 15px 30px 15px 15px;
Height: 256px;
Font-size: 12px;
}
/* Header */
. Images h3 {
Font-size: 22px;
Font-weight: normal;
Margin: 0 0 20px 0;
Color: #456;
}
/* Tabs (those little circles below slides )*/
. Slidetabs {
Clear: both;
Margin-left: 310px;
}
/* Single tab */
. Slidetabs {
Width: 8px;
Height: 8px;
Float: left;
Margin: 3px;
Background: url (./navigator.png) 0 0 no-repeat;
Display: block;
Font-size: 1px;
}
/* Mouseover state */
. Slidetabs a: hover {
Background-position: 0-8px;
}
/* Active state (current page state )*/
. Slidetabs a. current {
Background-position: 0-16px;
}
/* Prev and next buttons */
. Forward,. backward {
Float: left;
Margin-top: 140px;
Background: # fff url (./hori_large.png) no-repeat;
Display: block;
Width: 30px;
Height: 30px;
Cursor: pointer;
Font-size: 1px;
Text-indent:-9999em;
}
/* Next */
. Forward {background-position: 0-30px; clear: right ;}
. Forward: hover {background-position:-30px-30px ;}
. Forward: active {background-position:-60px-30px ;}
/* Prev */
. Backward: hover {background-position:-30px 0 ;}
. Backward: active {background-position:-60px 0 ;}
/* Disabled navigational button. is not needed when tabs are
Configured with rotate: true */
. Disabled {
Visibility: hidden! Important;
}
PS: images used
Instance jsCopy codeThe Code is as follows: $ (function (){
$ (". Slidetabs"). tabs (". images> div ",{
// Enable "cross-fading" effect
Effect: 'fade ',
FadeOutSpeed: "slow ",
Next: '. forward ',
Prev: '. backward ',
// Start from the beginning after the last tab
Rotate: true
// Use the slideshow plugin. It accepts its own configuration
}). Slideshow ();
});
This is the same as js in html.
• Configuration
Complete list of Slide plug-ins for configuration options.
Attribute |
Default Value |
Description |
Next |
'. Forward' |
The "next tab" action of the element carried by the selector should be bound. If you instantiate multiple slides on the same page, you need to attach all the slide elements (tag/pane/bottom & Previous Page action) in a common package element. This logic follows the same principle as creating instances with multiple tabs. Prev |
Prev
|
'.backward' |
The "previous tab" action of the sibling element of the selector should be bound. If you instantiate multiple slides with the same phone number, you need to attach all slide elements (tag/pane/bottom & Previous Page action) in a common package element. This logic follows the same principle as creating instances with multiple tabs. |
DisabledClass |
'Disabled' |
CSS class name 'Disabled'Previous PageAndNextElement. For examplePrevious PageThe element is a scroll when there is no 'Disabled 'mentioned earlier. |
Autoplay |
False |
If this attribute is setRealThe tab automatically advances to the next tab to enable automatic "play" slides. This is easy to useRotateProperties tab. |
Autopause |
True |
If this attribute is setRealWhen the button for future/previous tab operation is mouseovered and then autoplay The function will be suspended. |
Interval |
3000 |
Time (in milliseconds) automatically goes to the tab. Only when this option is validAutomatic playbackIs Enabled or autoplay Method is called. |
Clickable |
True |
When setRealThe tab is then automatically pushed to the next tab by clicking the visible pane. |
JavaScript API
Method |
Return Value |
Description/Example |
Getconf |
Object |
Since 1.2.0. Returned configuration object for this plug-in |
GetTabs |
Tabs |
Since 1.2.0. Returns an API that references this tag. |
Play |
API |
Start to play the slides. |
Pause |
API |
Pause the slides. Playback restores the mouse from the label, pane, and navigation buttons. |
Stop |
API |
Stop the slide. This can only be restored by calling the play Method. |
Event
Make sure you have read about the event jQuery tool. All Event Listeners receive this event object as the first parameter.
Event |
Trigger time |
OnBeforePlay |
Play the video before it starts. ReturnFalseThe callback prevents playback from starting. |
OnPlay |
When playback starts. |
OnBeforePause |
Pause playing. ReturnFalse The callback prevents playback from starting. |
OnPause |
When playing is paused. |