轮播（内容滑块）组件jQuery.bxSlider教程，实例de

作者: 小二黑儿 | 来源:发表于2019-08-12 17:27 被阅读0次

轮播（内容滑块）组件jQuery.bxSlider教程，实例de
微信小程序学习-轮播图组件swiper
微信小程序的视图容器—swiper
小程序列表渲染
MUI组件（4）
小程序 | 365笔记第1天 | 轮播图
面向对象实战
轮播图（Carousel）
Slider - 轮播图
组件

Demo演示是内容滑块效果，轮播效果可自行根据API说明扩展，组件很强大，就看您项目需要哪种效果了

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播（内容滑块）组件jQuery.bxSlider教程，实例demo演示</title>
    <style>
        body {
            height   : 100vh;
            overflow : hidden;
        }
        .gold {
            background-color : #999999;
            border-radius    : 10px;
            margin           : 33vh auto 0;
            width            : 420px;
            overflow         : hidden;
        }
        h3 {
            margin         : 0;
            padding: 20px;
        }
        h3 span {
            float      : right;
            width      : 42px;
            height     : 18px;
            background : url(https://res.tuwan.com/templet/play/index/images/arrow_bg.png?v=1) no-repeat;
        }
        h3 span a {
            width  : 50%;
            height : 100%;
            float  : left;
        }

        #gold-list a {
            display       : inline-block;
            height        : 110px;
            overflow      : hidden;
            border-radius : 8px;
        }

        #gold-list a img {
            width  : 100%;
            height : 100%;
        }

        #gold-list a:hover img {
            transition : all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
            transform  : scale(1.2, 1.2)
        }

        h4 {
            margin        : 0;
            width         : 100%;
            position      : absolute;
            bottom        : 0;
            height        : 20px;
            line-height   : 20px;
            background    : rgba(0, 0, 0, 0.4);
            border-radius : 0 0 8px 8px;
            color         : #ffffff;
            font-size     : 12px;
            text-align    : center;
        }

        .bx-wrapper {
            margin-bottom : 0 !important;
            box-shadow    : none !important;
            border        : none !important;
            background    : transparent !important;
        }
    </style>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css"/>
<body>

<div class="gold">
    <h3>
        美女
        <span>
            <a href="javascript:;" id="prev"></a>
            <a href="javascript:;" id="next"></a>
        </span>
    </h3>

    <div id="gold-list">
        <a href="#"
           target="_blank">
            <img src="http://p3.pstatp.com/large/6c2a0008d4bf2b6df897"
                 alt="绝地求生">
            <h4>美女1</h4>
        </a>

        <a href="#"
           target="_blank">
            <img src="http://p1.pstatp.com/large/6c290008d794bc378cd1"
                 alt="绝地求生">
            <h4>美女2</h4>
        </a>

        <a href="#"
           target="_blank">
            <img src="http://p1.pstatp.com/large/6c2a0008d4d3024b4cc7"
                 alt="绝地求生">
            <h4>美女3</h4>
        </a>

        <a href="#"
           target="_blank">
            <img src="http://p3.pstatp.com/large/6ef200017ee3bb28c8a4"
                 alt="绝地求生">
            <h4>美女4</h4>
        </a>

        <a href="#"
           target="_blank">
            <img src="http://p9.pstatp.com/large/6ef300017e4f6b47a419"
                 alt="绝地求生">
            <h4>美女5</h4>
        </a>

    </div>
</div>

</body>

<script>
$(function() {
    // 内容滑动组件部分
    let slider = $('#gold-list').bxSlider({
        mode         : 'horizontal',
        moveSlides   : 1,
        slideMargin  : 32,
        infiniteLoop : true,
        slideWidth   : 152,
        minSlides    : 3,
        maxSlides    : 3,
        speed        : 800,
        controls     : false,
        pager        : false,
        auto         : true,
        autoStart    : true,
        autoControls : true
    });
    $("#prev").on("click", function() {
        slider.goToPrevSlide();
    });
    $("#next").on("click", function() {
        slider.goToNextSlide();
    });
})
</script>
</html>