图片轮播——Swiper实例

刺骨的言语ヽ痛彻心扉 2023-06-23 07:58 184阅读 0赞

### 一、Swiper简介 ###

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择[Swiper2.x][]（甚至支持IE7）。

Swiper 完全免费并开源（MIT Licensed），无论你使用在个人网站或商业网站，都无需付费。

官网：[https://www.swiper.com.cn/][https_www.swiper.com.cn]

### 二、实例 ###

**1、效果图**

1.1、缩放型

![20191221133609571.gif][]

1.2、3D界面

![20191221133839921.gif][]

1.3、Y轴位移

![2019122113425690.gif][]

1.4、旋转

![2019122113454549.gif][]

1.5、立方体效果

![20191221134743569.gif][]

1.6、3d翻转

![20191221134919127.gif][]

**2、代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Swiper Demo</title>
        
        <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
        <style>
            .myswiper {
                width: 1200px;
                margin: auto;
                text-align: center;
            }
        img{
    	   width:200px;
               height:260px;
    	}
        </style>
    </head>
    <body>
    <div class="myswiper">
        
        <div class="swiper-container demo1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
    
        
        <div class="swiper-container demo2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
    
        
        <div class="swiper-container demo3">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
    
        
        <div class="swiper-container demo4">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
    
        
        <div class="swiper-container demo5">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
            </div>
        </div>
    
        
        <div class="swiper-container demo6">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
                <div class="swiper-slide">
                    <img src="img/imgdemo.png">
                </div>
            </div>
        </div>
    
    </div>
    </body>
    
    <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
    <script>
        // 缩放型
        var swiper = new Swiper('.demo1', {
            loop: true,
            speed: 2500,
            slidesPerView: 5,
            spaceBetween: 30,
            centeredSlides: true,
            watchSlidesProgress: true,
            on: {
                setTranslate: function () {
                    slides = this.slides;
                    for (i = 0; i < slides.length; i++) {
                        slide = slides.eq(i);
                        progress = slides[i].progress;
                        slide.css({'opacity': '', 'background': ''});
                        slide.transform('');//清除样式
                        slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');
                    }
                },
                setTransition: function (transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                }
            },
            // 显示左右滚动条
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 显示分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
    
        // 3D界面
        var swiper = new Swiper('.demo2', {
            loop: true,
            mousewheel: true, // 鼠标滚动
            effect: 'coverflow',
            slidesPerView: 3,
            centeredSlides: true,
            coverflowEffect: {
                rotate: 30,
                stretch: 10,
                depth: 60,
                modifier: 2,
                slideShadows: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 显示分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
    
        // Y轴位移
        var swiper = new Swiper('.demo3', {
            loop: true,
            speed: 2500,
            slidesPerView: 5,
            spaceBetween: 30,
            centeredSlides: true,
            watchSlidesProgress: true,
            on: {
                setTranslate: function () {
                    slides = this.slides;
                    for (i = 0; i < slides.length; i++) {
                        slide = slides.eq(i);
                        progress = slides[i].progress;
                        slide.css({'opacity': '', 'background': ''});
                        slide.transform('');
                        slide.css('opacity',(1-Math.abs(progress)/6));
                        slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');
                    }
                },
                setTransition: function (transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                }
            },
            // 显示左右滚动条
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 显示分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
    
        // 旋转
        var swiper = new Swiper('.demo4', {
            loop: true,
            speed: 2500,
            slidesPerView: 5,
            spaceBetween: 30,
            centeredSlides: true,
            watchSlidesProgress: true,
            on: {
                setTranslate: function () {
                    slides = this.slides;
                    for (i = 0; i < slides.length; i++) {
                        slide = slides.eq(i);
                        progress = slides[i].progress;
                        slide.css({'opacity': '', 'background': ''});
                        slide.transform('');
                        slide.transform('rotate('+ progress*30+'deg)');
                    }
                },
                setTransition: function (transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                }
            },
            // 显示左右滚动条
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 显示分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
    
        // 立方体效果
        var swiper = new Swiper('.demo5', {
            loop: true,
            mousewheel: true, // 鼠标滚动
            effect : 'cube',
            cubeEffect: {
                slideShadows: true,
                shadow: true,
                shadowOffset: 100,
                shadowScale: 0.6
            }
        });
    
        // 3d翻转
        var swiper = new Swiper('.demo6', {
            loop: true,
            mousewheel: true, // 鼠标滚动
            effect : 'flip',
            flipEffect: {
                slideShadows : true,
                limitRotation : true,
            }
        });
    </script>
    </html>

官网API地址：[https://www.swiper.com.cn/api/index.html][https_www.swiper.com.cn_api_index.html]

[Swiper2.x]: http://swiper2.swiper.com.cn/
[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[20191221133609571.gif]: https://img-blog.csdnimg.cn/20191221133609571.gif
[20191221133839921.gif]: https://img-blog.csdnimg.cn/20191221133839921.gif
[2019122113425690.gif]: https://img-blog.csdnimg.cn/2019122113425690.gif
[2019122113454549.gif]: https://img-blog.csdnimg.cn/2019122113454549.gif
[20191221134743569.gif]: https://img-blog.csdnimg.cn/20191221134743569.gif
[20191221134919127.gif]: https://img-blog.csdnimg.cn/20191221134919127.gif
[https_www.swiper.com.cn_api_index.html]: https://www.swiper.com.cn/api/index.html