배너 다이어그램을 위한 5가지 예제 코드

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', : true, g 페이지 매기기: true, // 여부 호출기를 추가하려면 loop:true, //"슬라이드"를 제외한 다른 애니메이션은 기본적으로 반복됩니다. 자동 재생: 2000, autoplayDisableOnInteraction: false }); var mySlide2 = new Slide3D('.flip', { 너비: 너비, 높이:높이, 효과: // 뒤집기 | 회전 | 평면 조각 출처: ['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' ] , 상자: { : false }); var mySlide3 = new Slide3D('.turn', { 너비: 너비, 높이:높이, 효과: '회전', // 뒤집기 | 회전 | 슬라이드 | 플랫 | 조각 출처: [' https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXXJXVXXXXXXXXX-700-306 .jpg', 'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], box:{ 행: 6, // 행 잘라내기 열: 3 // 열 잘라내기 }, pagination: true, // 페이지 매기기 추가 여부 장치 paginationClickable: true, autoplay: 2000 // autoplayDisableOnInteraction: false }); var mySlide4 = new Slide3D('.Flat', { width: width, 높이:높이, 효과: '플랫', // 뒤집기 | 플랫 | 조각 출처: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-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/TB1ADKERFXXXXX 2XFXXXXXXXXXX-700 -306.jpg', 'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'], 상자:{ 행 : 6, // 행 자르기 cols: 10 / / 열 자르기 }, pagination: true, // 페이지 매기기 추가 여부 paginationClickable: true, autoplay: 2000, autoplayDisableOnInteraction : false }); var mySlide5 = new Slide3D('.fragment' , { width : width, Height:height, effect: 'fragment', // 뒤집기 | 회전 | 슬라이드 | 평면 | 조각 출처: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXXXX-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.rfxxxxxxxxxxxxxxx-700-306.jpg'], Box: { ROWS: 6, // Cols: 3 // 열 자르기},////////// ////////////////////////////ize///// / 페이지네이터 추가 여부 paginationClickable: true, 자동 재생 : 2000, autoplayDisableOnInteraction: false });

배너 다이어그램을 위한 5가지 예제 코드

관련 기사