1.普通的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }  
        .swiper-wrapper .swiper-slide img{
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
    <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/01.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/02.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/03.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {






          direction: 'horizontal', // 垂直切换选项 vertical,
          loop: true, // 循环模式选项
        //   speed:2000,   //延时
          effect:'slide',     //切换效果 slide默认位移切换、fade淡入、
                            //cube方块、coverflow（3d流）、flip(3d翻转)




          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        </script>
    
</body>
</html>

2.走马灯切换式轮播图

<html lang="en"><head>
    <meta charset="utf-8">
    <title>Swiper的走马灯切换</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" />
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
body{
margin:0;}

#certify {
position: relative;
width: 1200px;
margin: 0 auto
}

img{
width: 520px;
height: 310px;
}

#certify .swiper-container {
padding-bottom: 60px;
}

#certify  .swiper-slide {
width: 520px;
height: 310px;
background: #fff;
box-shadow: 0 8px 30px #ddd;
}

#certify  .swiper-slide img{
display:block;
}

#certify  .swiper-slide p {
line-height: 98px;
padding-top: 0;
text-align: center;
color: #636363;
font-size: 1.1em;
margin: 0;
box-shadow: 0 8px 30px #ddd;
}

#certify .swiper-pagination {
width: 100%;
bottom: 20px;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
border: 3px solid #fff;
background-color: #d5d5d5;
width: 10px;
height: 10px;
opacity: 1;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
border: 3px solid #00aadc;
background-color: #fff;
}

.swiper-button-next, .swiper-button-prev{
            width:86px;
            height:112px;
            background-size:86px 112px;
            margin-top:-400px;
            outline:none;
            }

#certify .swiper-button-prev:hover {
background-position: 0 -46px;
background-size: 100%
}

#certify .swiper-button-next:hover {
background-position: 0 -139px;
background-size: 100%
}


</style>
</head>
<body>
<div id="certify">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3820px, 0px, 0px);">
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="transform: translateX(6448px) scale(-0.6); z-index: 919; opacity: 0; transition-duration: 0ms;">
        <img src="images/01.jpg">
        <p>非常难得又值钱的认证证书</p>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1" style="transform: translateX(5096px) scale(-0.4); z-index: 929; opacity: 0; transition-duration: 0ms;">
        <img src="images/02.jpg">
        <p>深圳市优秀互联网企业认定证书</p>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="2" style="transform: translateX(3900px) scale(-0.2); z-index: 939; opacity: 0; transition-duration: 0ms;">
        <img src="images/03.png">
        <p>质量管理体系认证荣誉证书</p>
    </div>
<div class="swiper-slide" data-swiper-slide-index="0" style="transform: translateX(1248px) scale(0.4); z-index: 969; opacity: 1; transition-duration: 0ms;">
    <img src="images/01.jpg">
    <p>非常难得又值钱的认证证书</p>
</div>
<div class="swiper-slide" data-swiper-slide-index="1" style="transform: translateX(676px) scale(0.6); z-index: 979; opacity: 1; transition-duration: 0ms;">
    <img src="images/02.jpg">
    <p>深圳市优秀互联网企业认定证书</p>
</div>
<div class="swiper-slide" data-swiper-slide-index="1" style="transform: translateX(676px) scale(0.6); z-index: 979; opacity: 1; transition-duration: 0ms;">
    <img src="images/03.png">
    <p>偶继斌哥哥好好算算i</p>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets">
    <span class="swiper-pagination-bullet"></span>
    <span class="swiper-pagination-bullet"></span>
    <span class="swiper-pagination-bullet"></span>
    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
    <span class="swiper-pagination-bullet"></span>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

<script>
certifySwiper = new Swiper('#certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        //clickable :true,
    },
    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;
                if (Math.abs(slideProgress) > 1) {
                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                translate = slideProgress * modify * 260 + 'px';
                scale = 1 - Math.abs(slideProgress) / 5;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                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>

3.知识点属性

（1）speed轮播图切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至切合的时间。默认是300
（2）effect轮播图切换效果，默认为slide(位移切换)，可设置为slide(普通切换，默认),fade淡入,cube方块、coverflow(3d流)、flip(3d翻转)

来源：CSDN

作者：Web_front

链接：https://blog.csdn.net/Web_front/article/details/103653525

标签

轮播