jquery.slides.js

12/6/2015来源:Javascript教程人气:570

http://slidesjs.com/#docs

一款强大的,专业的幻灯片组件,全方位对幻灯片的速度。。全方位的控制;

 1 $(function(){
 2   $("#slides").slidesjs({
 3     play: {
 4       active: true,
 5         // [boolean] Generate the play and stop buttons.
 6         // You cannot use your own buttons. Sorry.
 7       effect: "slide",
 8         // [string] Can be either "slide" or "fade".
 9       interval: 5000,
10         // [number] Time spent on each slide in milliseconds.
11       auto: false,
12         // [boolean] Start playing the slideshow on load.
13       swap: true,
14         // [boolean] show/hide stop and play buttons
15       pauSEOnHover: false,
16         // [boolean] pause a playing slideshow on hover
17       restartDelay: 2500
18         // [number] restart delay on inactive slideshow
19     }
20   });
21 });

前台:

 1 <!doctype html>
 2 <head>
 3   <style>
 4     /* PRevents slides from Flashing */
 5     #slides {
 6       display:none;
 7     }
 8   </style>
 9 
10   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
11   <script src="jquery.slides.min.js"></script>
12 
13   <script>
14     $(function(){
15       $("#slides").slidesjs({
16         width: 940,
17         height: 528
18       });
19     });
20   </script>
21 </head>
22 <body>
23   <div id="slides">
24     <img src="http://placehold.it/940x528">
25     <img src="http://placehold.it/940x528">
26     <img src="http://placehold.it/940x528">
27     <img src="http://placehold.it/940x528">
28     <img src="http://placehold.it/940x528">
29   </div>
30 </body>