js---轮播特效示例代码

先看效果：

示例一：

示例二：

具体示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper的切换</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<style type="text/css">
#certify{width:1280px; margin:0 auto; position:relative;}
#certify .swiper-container{padding-bottom:60px}
#certify .swiper-slide{width:350px;height:475px;background:#fff;box-shadow:0 8px 30px #ddd}
#certify .swiper-slide img{display:block; width: 100%;}
#certify .slideleft img{transform: perspective(1000px) rotateY(25deg); -webkit-transform: perspective(1000px) rotateY(25deg);}
#certify .slideright img{transform: perspective(1000px) rotateY(-25deg); -webkit-transform: perspective(1000px) rotateY(-25deg);}
#certify .swiper-slide-active img{transform: perspective(1000px) rotateY(0deg); -webkit-transform: perspective(1000px) rotateY(0deg);}
#certify .swiper-button-prev{width: 25px; height: 50px; background-size: 60%; left: 0;}
#certify .swiper-button-next{width: 25px; height: 50px; background-size: 60%; right: 0;}
/**/
#certifys{width:1280px; margin:0 auto; position:relative;}
#certifys .swiper-container{padding-bottom:60px}
#certifys .swiper-slide{width:350px;height:475px;background:#fff;box-shadow:0 8px 30px #ddd}
#certifys .swiper-slide img{display:block; width: 100%;}
#certifys .swiper-slide-next img{transform: perspective(1000px) rotateY(25deg); -webkit-transform: perspective(1000px) rotateY(25deg);}
#certifys .swiper-slide-prev img{transform: perspective(1000px) rotateY(-25deg); -webkit-transform: perspective(1000px) rotateY(-25deg);}
#certifys .swiper-slide-active img{transform: perspective(1000px) rotateY(0deg); -webkit-transform: perspective(1000px) rotateY(0deg);}
#certifys .swiper-button-prev{width: 25px; height: 50px; background-size: 60%; left: 0;}
#certifys .swiper-button-next{width: 25px; height: 50px; background-size: 60%; right: 0;}
</style>
</head>
<body>
<div id="certify">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/111.jpg" /></div>
            <div class="swiper-slide"><img src="images/222.jpg" /></div>
            <div class="swiper-slide"><img src="images/333.jpg" /></div>
            <div class="swiper-slide"><img src="images/111.jpg" /></div>
            <div class="swiper-slide"><img src="images/111.jpg" /></div>
            <div class="swiper-slide"><img src="images/333.jpg" /></div>
            <div class="swiper-slide"><img src="images/222.jpg" /></div>
        </div>
    </div> 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div id="certifys">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/111.jpg" /></div>
            <div class="swiper-slide"><img src="images/222.jpg" /></div>
            <div class="swiper-slide"><img src="images/333.jpg" /></div>
            <div class="swiper-slide"><img src="images/111.jpg" /></div>
            <div class="swiper-slide"><img src="images/111.jpg" /></div>
            <div class="swiper-slide"><img src="images/333.jpg" /></div>
            <div class="swiper-slide"><img src="images/222.jpg" /></div>
        </div>
    </div> 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
var certifySwiper = new Swiper('#certify .swiper-container',{
    watchSlidesProgress:true,
    slidesPerView:'auto',
    centeredSlides:true,
    loop:true,
    loopedSlides:7,
    autoplay:false,
    // autoplay:{
    //     delay: 2500,
    //     disableOnInteraction: false
    // },
    navigation:{
        nextEl:'.swiper-button-next',
        prevEl:'.swiper-button-prev',
    },
    pagination:{
        el:'.swiper-pagination'
    },
    on:{
        progress:function(progress){
            for (i =0;i < this.slides.length; i++){
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                modify = 1;
                translate = slideProgress * modify * 510 + 'px';
                scale = 1 - Math.abs(slideProgress) / 7;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.removeClass('slideleft');
                slide.removeClass('slideright');
                slide.addClass(slideProgress > 0 ? 'slideright' : 'slideleft');
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex',zIndex);slide.css('opacity',1);
                if (Math.abs(slideProgress) >3) {slide.css('opacity',0);}
            }
        },
        setTransition:function(transition) {
            for (var i =0;i < this.slides.length;i++) {
                var slide =this.slides.eq(i);
                slide.transition(transition);
            }
        }
    }
});
</script>

<script>
var certifySwiper = new Swiper('#certifys .swiper-container',{
    watchSlidesProgress:true,
    slidesPerView:'auto',
    centeredSlides:true,
    loop:true,
    loopedSlides:7,
    autoplay:false,
    // autoplay:{
    //     delay: 2500,
    //     disableOnInteraction: false
    // },
    navigation:{
        nextEl:'.swiper-button-next',
        prevEl:'.swiper-button-prev',
    },
    pagination:{
        el:'.swiper-pagination'
    },
    on:{
        progress:function(progress){
            for (i =0;i < this.slides.length; i++){
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                modify = 1;
                translate = slideProgress * modify * 510 + 'px';
                scale = 1 - Math.abs(slideProgress) / 7;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.removeClass('slideleft');
                slide.removeClass('slideright');
                slide.addClass(slideProgress > 0 ? 'slideright' : 'slideleft');
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex',zIndex);slide.css('opacity',1);
                if (Math.abs(slideProgress) >3) {slide.css('opacity',0);}
            }
        },
        setTransition:function(transition) {
            for (var i =0;i < this.slides.length;i++) {
                var slide =this.slides.eq(i);
                slide.transition(transition);
            }
        }
    }
});
</script>

</body>

</html>