利用 slide3D.js 实现五种轮播效果: slide,flip,turn,flat,fragment
可以自主选择是否添加分页器, 是否循环等, 替换 source 图片就能用起来了~
话不多说上代码~
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="https://os.alipayobjects.com/rmsportal/cfYsvciteYQGywxceeGI.CSS" />
- <style id="stylesheet">
- 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;
- }
- </style>
- </head>
- <body>
- <div id="content">
- <div class="title"> 轮播图 </div>
- <div class="container3D slide">
- <div class="wrapper3D">
- <div class="slide3D">
- <img src="https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg" alt="" />
- </div>
- <div class="slide3D">
- <img src="https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg" alt="" />
- </div>
- <div class="slide3D">
- <img src="https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg" alt="" />
- </div>
- <div class="slide3D">
- <img src="https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg" alt="" />
- </div>
- <div class="slide3D">
- <img src="https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg" alt="" />
- </div>
- </div>
- <div class="slide3D-pagination"></div>
- <div class="slide3D-prev-button"></div>
- <div class="slide3D-next-button"></div>
- </div>
- <div class="container3D flip">
- <div class="wrapper3D">
- </div>
- <div class="slide3D-pagination"></div>
- <div class="slide3D-prev-button"></div>
- <div class="slide3D-next-button"></div>
- </div>
- <div class="container3D turn">
- <div class="wrapper3D">
- </div>
- <div class="slide3D-pagination"></div>
- <div class="slide3D-prev-button"></div>
- <div class="slide3D-next-button"></div>
- </div>
- <div class="container3D flat">
- <div class="wrapper3D">
- </div>
- <div class="slide3D-pagination"></div>
- <div class="slide3D-prev-button"></div>
- <div class="slide3D-next-button"></div>
- </div>
- <div class="container3D fragment">
- <div class="wrapper3D">
- </div>
- <div class="slide3D-pagination"></div>
- <div class="slide3D-prev-button"></div>
- <div class="slide3D-next-button"></div>
- </div>
- </div>
- <script src="https://os.alipayobjects.com/rmsportal/RnYtVBKOUzXXOiZIqFtF.js"></script>
- <script id="scripts">
- 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
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/35185/7783ac41618e57f887d7aa178fd7ac4c.html