<!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>