<!doctype html> <head> <script src="js/jquery-latest.min.js"></script> <script src="js/jquery.slides.min.js"></script> <style> /* Prevents slides from flashing */防止閃爍 #slides { display:none; } </style> </head> <body> <div id="slides"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> </div> <script> $(function(){ $("#slides").slidesjs({ width: 940, height: 450, navigation: { //顯示上一張下一張 active: true }, play: { //設置自動時的動畫效果、自動播放、間隔、鼠標懸停、移出恢復時間 active: false, // 生成下一張和上一張按鈕。 // 可以設置false，使用自己寫的按鈕來替代系統的按鈕。 // previous button: class="slidesjs-previous slidesjs-navigation" 自己寫的按鈕，上一張按鈕的class=“” // next button: class="slidesjs-next slidesjs-navigation" 下一張按鈕的class="" effect: "slide", // [string] Can be either "slide" or "fade". 效果滑動，也可以設置成fade幻燈 interval: 2000,//動畫間隔 auto:true,//默認不自動進行播放！十分重要，設置成true。 swap: false,//顯示和隱藏按鈕 pauseOnHover: true,// 鼠標移入，暫停動畫 restartDelay: 2500,// 恢復動畫間隔 }, effect: { //特別注意：動畫效果要與上面play中的屬性保持一致，否則點擊切換圖片后，無法恢復動畫 slide:{ speed:2000, //動畫切換速度 crossfade: true// 交叉幻燈效果 }} }); }); </script> </body>