jQuery 轮播图版本三：（swiper.js）做轮播图，三张图轮播

效果如下

 用到的箭头图片

 

 1.HTML部分

  <div class="three_box">
        <div class="cont1200">
            <h3 class="tc color_fff font_bold font26px">工作室</h3>
            <div id="certify">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img class="img" src="__IMG__/index/img1.png" />
                            <h4 class="tc font16px">标题</h4>
                            <p>非常难得又值钱的认证证书非常难得又值钱的认证证书非常难得又值钱的认证证书非常难得又值钱的认证证书</p>
                        </div>
                        <div class="swiper-slide"><img class="img" src="__IMG__/index/img1.png" />
                            <h4 class="tc font16px">标题</h4>
                            <p>深圳市优秀互联网企业认定证书</p>
                        </div>
                        <div class="swiper-slide"><img class="img" src="__IMG__/index/img3.png" />
                            <h4 class="tc font16px">标题</h4>
                            <p>质量管理体系认证荣誉证书</p>
                        </div>
                    </div>
                    <h3></h3>
                </div>
                <!-- <div class="swiper-pagination"></div> -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>

2.CSS部分

.three_box{
    background:url(../../images/index/bg_2.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}
.three_box .cont1200 h3{
    margin-top: 95px;
    letter-spacing: 5px;
}
@charset "utf-8";
/* CSS Document */

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

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

#certify  .swiper-slide {
    width: 366px;
    height: 380px;
    background: #fff;
    box-shadow: 0 8px 30px #ddd;
}
#certify  .swiper-slide .img{
    width: 366px;
    height: 280px;
}
#certify  .swiper-slide img{
    display:block;
}
#certify  .swiper-slide h4 {
    line-height: 40px;
    padding-top: 0;
    text-align: center;
    color: #000;
    margin: 0;
}
#certify  .swiper-slide p {
    line-height: 24px;
    padding: 0 20px;
    text-align: center;
    color: #666;
    margin: 0;
}

#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;
}

#certify .swiper-button-prev {
    left: -60px;
    top: 35%;
    width: 45px;
    height: 45px;
    background: url(../../images/index/wm_button_icon.png) no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

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

#certify .swiper-button-next {
    right: -60px;
    top: 35%;
    width: 45px;
    height: 45px;
    background: url(../../images/index/wm_button_icon.png) no-repeat;
    background-position: 0 -93px;
    background-size: 100%;
}

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

/* 补充 */
.swiper-container-android .swiper-slide, .swiper-wrapper {
    justify-content: space-between;
}

 

3.JS部分

    <link rel="stylesheet" href="__JS__/swiper/swiper.min.css">
<script type="text/javascript" src="__JS__/common/jquery-1.9.1.min.js"></script>
<script src="__JS__/swiper/swiper.min.js"></script>
<script>
    $(function () {
          certifySwiper = new Swiper('#certify .swiper-container', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            loopedSlides: 3,
            autoplay: 3000,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            pagination: '.swiper-pagination',
            //paginationClickable :true,
            onProgress: function (swiper, progress) {
                for (i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides.eq(i);
                    var slideProgress = swiper.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.5 + 1;
                    }
                    translate = slideProgress * modify * 380 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 8;
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('overflow', 'hidden');
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 3) {
                        slide.css('opacity', 0);
                    }
                }
            },
            onSetTransition: function (swiper, transition) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides.eq(i)
                    slide.transition(transition);
                }

            },
        });
    })
</script>