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