Source: http://www.ido321.com/852.html
Today, I stumbled upon a more useful picture. Carousel Plugin-slidebox
First look at the effect: http://slidebox.sinaapp.com/
The code is as follows
1:<html>
2:<html>
3:<head>
4:<Metacontent= "text/html; charset=utf-8" >
5:<title>slidebox Carousel Plugin </title>
6:<link href= "css/jquery. Slidebox. css" rel= " Stylesheet "type=" text/css "/>
7:</head>
8:<body>
9:<Center>
:<h5> One, left and right carousel, Scrolling lasts 0.6 seconds, rolling delay 3 seconds, scrolling effect swing, initial focus 1th, click the button Auto-hide, button border radius (ie8-only) 5px (the default values above)</h3>
One :<Div id= "demo1" class= "Slidebox">
: <ul class= "items">
: <li><a href= "http:// Www.ido321.com "title=" title One "></a></li>
: <li><a href= "http://www.ido321.com" Title= "title two" ></a></li>
: <li><a href= "http:// Www.ido321.com "title=" title three "></a></li>
: </ul>
:</div>
:<h5> Second, up and down carousel, Scrolling lasts 0.3 seconds, rolling delay 5 seconds, scrolling effect linear, initial focus 2nd, click Button Auto Hide </h3>
:<Div id= "Demo2" class= "Slidebox">
: <ul class= "items">
: <li><a href= "http:// Www.ido321.com "title=" title One "></a></li>
: <li><a href= "http://www.ido321.com" Title= "title two" ></a></li>
P : <li><a href= "http:// Www.ido321.com "title=" title three "></a></li>
: </ul>
:</div></center>
: < script src= "Js/jquery.min .js "type=" Text/javascript "> < /script >
:<script src= "js/jqueryslidebox. Min. js" Type= "Text/javascript"></script>
:<script>
: jQuery (function ($) {
: $ (' #demo1 '). Slidebox();
: $ (' #demo2 '). Slidebox({
: Direction : 'top',//left,top# direction
duration:0.3,//scroll duration, Unit: SEC
easing: ' linear ',//swing,linear//scrolling effects
: delay:5,//rolling delay time, Unit: SEC
: startindex:1//Initial focus sequence
Panax Notoginseng: });
: });
:</script>
Max :<DivStyle= "text-align:Center; Clear: Both ">
:<p> Browser: IE8, 360, FireFox, Chrome and other browsers </P >
Q :<p> Source:<a href= "http:// www.ido321.com/"target=" _blank "> Forgotten ~ Shallow think </a></p>
:</div>
:</body>
:</HTML>
The SLIDEBOX.CSS and slidebox.js files are introduced in the code. Demo1 is the default setting, Demo2 is a custom setting.
The default settings for slide are as follows
1://default parameters
2: var defaults = {
3: ' left ',//left,top
4: duration:0.6,//unit:seconds
5: ' Swing ',//swing,linear
6: delay:3,//unit:seconds
7: startindex:0,
8: true,
9: clickbarradius:5,//unit:px
Ten: false,
One by one : null,
: null
: };
jquery Plugin Photo Carousel plugin –slidebox