5种关于banner图的实例代码

html,body{ width: 100%; height: 100%; } .slide3D img{ width: 100%; } .container3D{ background: #eee; margin:10px; float:left; } .title{ padding:10px; color:#fff; font-size:18px; } 轮播图 var width = 400; var height = 178; var mySlide = new Slide3D('.slide', { width: width, height:height, effect: 'slide', paginationClickable: true, pagination: true, // 是否添加分页器 loop:true, //是否循环，除“slide”外，其他动画默认循环 autoplay: 2000, autoplayDisableOnInteraction : false }); var mySlide2 = new Slide3D('.flip', { width: width, height:height, effect: 'flip', // flip | turn | slide | flat | fragment sources: ['https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], box:{ rows: 6, // 切割行 cols: 3 // 切割列 }, pagination: true, // 是否添加分页器 paginationClickable: true, autoplay: 2000, autoplayDisableOnInteraction : false }); var mySlide3 = new Slide3D('.turn', { width: width, height:height, effect: 'turn', // flip | turn | slide | flat | fragment sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], box:{ rows: 6, // 切割行 cols: 3 // 切割列 }, pagination: true, // 是否添加分页器 paginationClickable: true, autoplay: 2000 // autoplayDisableOnInteraction : false }); var mySlide4 = new Slide3D('.flat', { width: width, height:height, effect: 'flat', // flip | turn | slide | flat | fragment sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], box:{ rows: 6, // 切割行 cols: 10 // 切割列 }, pagination: true, // 是否添加分页器 paginationClickable: true, autoplay: 2000, autoplayDisableOnInteraction : false }); var mySlide5 = new Slide3D('.fragment', { width: width, height:height, effect: 'fragment', // flip | turn | slide | flat | fragment sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], box:{ rows: 6, // 切割行 cols: 3 // 切割列 }, pagination: true, // 是否添加分页器 paginationClickable: true, autoplay: 2000, autoplayDisableOnInteraction : false });

5种关于banner图的实例代码

相关文章