<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; list-style: none; margin: 0; } /*容器高度*/ #iSlider-effect-wrapper { height: 400px; width: 500px; margin: 0 auto; margin-top: 4.6rem; overflow: hidden; position: relative; } .iSlider-effect ul{ list-style: none; padding: 0; margin: 0; height: 100%; overflow: hidden } .iSlider-effect li { position: absolute; margin: 0; padding: 0; height: 100%; overflow: hidden; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; list-style: none } .iSlider-effect ul li img { max-width: 100%; max-height: 100%; margin: 0; padding: 0 } .iSlider-effect div { background-color: #fff; padding: 3px } </style> </head> <body> <script type="text/javascript" src="https://www.jb51.net/mobile_slider.js"></script> <!--组件容器--> <div> </div> <script> //组件注册 var islider1 = new iSlider({ //节点获取 dom: document.getElementById("iSlider-effect-wrapper"), //图片配置 data: [ { content: "images/01.jpeg", }, { content: "images/04.jpg", }, { content: "images/05.jpg", } ], //播放间隔 duration: 3000, //animateType切换方式 //default：默认 //rotate：旋转 //flip：弹出 animateType: 'rotate', //是否自动播放 isAutoplay: true, //是否循环播放 isLooping: true, // isVertical: true, 是否垂直滚动 }); islider1.bindMouse(); </script> </body> </html>
iSlider手机端图片滑动切换插件使用详解(2)
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/e265db392ff8378c42a7c0ae7f23ca63.html