5 exemples de codes pour les diagrammes de bannières

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, effet : 'slide', paginationClickable: true, pagination: true, // S'il faut ajouter un paginateur loop:true, // S'il faut boucler, sauf "slide", les autres animations bouclent par défaut autoplay : 2000, autoplayDisableOnInteraction : false }); var mySlide2 = new Slide3D('.flip', { width: width, height:height, effect : 'retourner', // retourner | tourner | glisser | fragment sources : ['https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg', ' https://gw.alicdn.com/tfs/TB1gY9yRFXXXXJJXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXX-700-306.jpg', ' https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], box :{ lignes : 6, // Couper les lignes cols : 3 // Couper les colonnes }, pagination : true, // S'il faut ajouter une pagination paginationClickable : true, autoplay : 2000, autoplayDisableOnInteraction : false }); var mySlide3 = new Slide3D('.turn', { width: width, height:height, effet : 'tourner', // retourner | tourner | glisser | fragment sources : ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXXJXVXXXXXXXXXX-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 :{ lignes : 6, // Couper les lignes cols : 3 // Couper les colonnes }, pagination : true, // S'il faut ajouter une pagination paginationClickable : true, lecture automatique : 2000 // autoplayDisableOnInteraction : false }); var mySlide4 = new Slide3D('.flat', { width: width, height :hauteur, effet : 'plat', // retourner | tourner la diapositive | fragment plat sources : ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXX-700-306.jpg' , 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJJXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg' , 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], case :{ lignes : 6, // Couper les lignes cols : 10 // Couper les colonnes }, pagination : true, // S'il faut ajouter une pagination paginationClickable : true, autoplay : 2000, autoplayDisableOnInteraction : false }) ; var mySlide5 = new Slide3D('.fragment', { width: width, height:height, effect: 'fragment', // retourner | tourner | slide | flat | fragment sources : ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJJXVXXXXXXXXXX-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'], case :{ lignes : 6, // coupe des lignes cols : 3 // Couper les colonnes }, pagination : true, // S'il faut ajouter un paginateur paginationClickable : true, autoplay : 2000, autoplayDisableOnInteraction : false });

5 exemples de codes pour les diagrammes de bannières

Articles Liés