@miclay/slidejs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <title>SlideJS DEMO</title> </head> <body> <div class="slid-box"> <div class="slid-item"> <div class="box"> 1 <div class="content"> <h3>标题</h3> 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 </div> </div> </div> <div class="slid-item"> <div class="box"> 2 <div class="content"> <h3>标题</h3> 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 </div> </div> </div> <div class="slid-item"> <div class="box"> 3 <div class="content"> <h3>标题</h3> 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 </div> </div> </div> <div class="slid-item"> <div class="box"> 4 <div class="content"> <h3>标题</h3> 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 正文内容正文内容正文内容正文内容正文内容 </div> </div> </div> </div> <script src="../src/index.js"></script> <script> var slider = new SlideJS({ parentSelector: '.slid-box', // 父容器的selector itemSelector: '.slid-item', // 每一屏的selector，确保为parentSelector下的子元素 itemDocSelector: '.box', // 每一屏内容文档(自适应高度)的selector，非必填，默认为itemSelector的子元素 width: 800, // 宽度，默认取值为window.innerWidth height: 500, // 高度，默认取值为window.innerHeight transitionDuration: 500, // 翻屏动画时间，单位毫秒ms，默认值为500 transitionTimingFunction: 'ease', // 翻屏动画缓动函数，默认值为ease transitionDelay: 0, // 翻屏动画过渡效果延时，单位毫秒ms，默认值为0 activeIndex: 0, // 当前展示第几屏，从0开始，默认值为0 loop: false, // 是否循环翻屏，默认值为false scrollSensitivity: 300, // 滑屏敏感度，默认300ms beforeSlide: function(prevIndex, nextIndex) { // return 'stop'; }, afterSlide: function(prevIndex, nextIndex) { console.log(prevIndex, nextIndex); } }); // slider.slidePrev(); // 翻到上一屏 // slider.slideNext(); // 翻到下一屏 // slider.slideTo(N); // 翻到第N屏，N从0开始计算 </script> </body> </html>