slider 轮播图

需要引入的插件文件

silder jquery.slider.css jquery.slider.min.js
swiper swiper.min.css swiper.min.js

新建一个叫 banner 的 div

<div id="banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide_b">
                <a href=""><img src="https://desk-fd.zol-img.com.cn/t_s1366x768c5/g3/M00/00/0F/ChMlV17sKLiIbKLtAB8qedDp4zQAAU9KwPNvEcAHyqR649.jpg" width="100%" height="100%" alt=""></a>
            </div>
            <div class="swiper-slide swiper-slide_b">
                <a href=""><img src="https://desk-fd.zol-img.com.cn/t_s1024x768c5/g3/M08/00/0F/ChMlV17sKRSIevU_AAeclS6UN-UAAU9MwIIO-kAB5yt020.jpg" width="100%" height="100%" alt=""></a>
            </div>
            <div class="swiper-slide swiper-slide_b">
                <a href=""><img src="https://desk-fd.zol-img.com.cn/t_s1366x768c5/g3/M06/03/03/ChMlV17wTKuIDYfaAAzlzgwgHV4AAVGAQIxI_IADOXm187.jpg" width="100%" height="100%" alt=""></a>
            </div>
            <div class="swiper-slide swiper-slide_b">
                <a href=""><img src="https://desk-fd.zol-img.com.cn/t_s1024x768c5/g3/M08/00/0F/ChMlV17sKRSIevU_AAeclS6UN-UAAU9MwIIO-kAB5yt020.jpg" width="100%" height="100%" alt=""></a>
            </div>
            <div class="swiper-slide swiper-slide_b">
                <a href=""><img src="https://desk-fd.zol-img.com.cn/t_s1280x800c5/g3/M03/03/01/ChMlV17wPWqILZ1fAAhk4K-gBlgAAVFtgGX6foACGT4033.jpg" width="100%" height="100%" alt=""></a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

banner 的 css 样式

#banner{
    width: 750px;
    height: 250px;
    margin: 0 auto;
    border-radius: 0.4rem;
    overflow: hidden;
    position: relative;
}

js 内容

$(function () {
    var banner = new Swiper('#banner', {
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            clickable: true,
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
});

最终效果图

image

适当的美化一下CSS

#banner .swiper-button-prev,
.swiper-container-rtl {
    background: url(../images/icon/leftb.png) no-repeat rgba(0, 0, 0, .3) !important;
    background-size: 18px 32px !important;
    background-position: center !important;
}

#banner .swiper-button-next,
.swiper-container-rtl {
    background: url(../images/icon/rightb.png) no-repeat rgba(0, 0, 0, .3) !important;
    background-size: 18px 32px !important;
    background-position: center !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    height: 2px;
    display: inline-block;
    width: 20px;
    border-radius: 0px;
    background-color: #ccc;
}

效果图

image