使用bxSlider onSlideAfter,onSlideBefore,onSliderLoad属性制作幻灯片效果

文章内容

‌bxSlider‌是一款轻量级且易于使用的jQuery插件，专门用于创建各种滑动效果，包括图片轮播、内容滑块等。它是由Steven Wanderski创建的开源滑块插件，具有轻便易用和高度定制化的特点，同时兼容多种浏览器，确保了跨平台的兼容性和用户友好性。 本文价绍使用bxSlider制作一款幻灯片文字动态效果：

html代码

<div class="jqfree">
        <ul id="slider">
            <li style="background-image: url(http://img.jqfree.com/700X500-1.jpg);">
                <div class="text">
                    <div class="info">
                        <h1>
                            <a href="#">标题标题标题标题标题</a></h1>
                        <p>
                            内容内容内容内容内容</p>
                        <p>
                            内容内容内容内容内容</p>
                    </div>
                </div>
            </li>
            <li style="background-image: url(http://img.jqfree.com/700X500-2.jpg);">
                <div class="text">
                    <div class="info">
                        <h1>
                            <a href="#">标题标题标题标题标题</a></h1>
                        <p>
                            内容内容内容内容内容</p>
                        <p>
                            内容内容内容内容内容</p>
                    </div>
                </div>
            </li>
            <li style="background-image: url(http://img.jqfree.com/700X500-3.jpg);">
                <div class="text">
                    <div class="info">
                        <h1>
                            <a href="#">标题标题标题标题标题</a></h1>
                        <p>
                            内容内容内容内容内容</p>
                        <p>
                            内容内容内容内容内容</p>
                    </div>
                </div>
            </li>
            <li style="background-image: url(http://img.jqfree.com/700X500-2.jpg);">
                <div class="text">
                    <div class="info">
                        <h1>
                            <a href="#">标题标题标题标题标题</a></h1>
                        <p>
                            内容内容内容内容内容</p>
                        <p>
                            内容内容内容内容内容</p>
                    </div>
                </div>
            </li>
            <li style="background-image: url(http://img.jqfree.com/700X500-1.jpg);">
                <div class="text">
                    <div class="info">
                        <h1>
                            <a href="#">标题标题标题标题标题</a></h1>
                        <p>
                            内容内容内容内容内容</p>
                        <p>
                            内容内容内容内容内容</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
<script src="jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script>
        $(function () {
            // banner 幻灯片
            $('#slider').bxSlider({
                mode: 'horizontal',
                infiniteLoop: true,
                speed: 800,
                auto: true,
                pager: true,
                controls: false,
                easing: 'ease-in-out',
                onSlideAfter: function (ele, oldIndex, newIndex) {
                    console.log(ele)
                    ele.addClass('active');
                },
                onSlideBefore: function (ele, oldIndex, newIndex) {
                    ele.siblings().removeClass('active');
                },
                onSliderLoad: function (curIndex) {
                    $('.bx-clone').next().addClass('active');
                }
            });

        });
    </script>

css代码

*
{
    margin: 0px;
    padding: 0px;
}
body
{
    font-family: "Microsoft YaHei" , Helvetica,Arial,sans-serif;
    font-size: 14px;
    color: #666666;
    background-color: #f7f8fa;
}
a
{
    text-decoration: none;
}
.jqfree
{
    height: 860px;
    position: relative;
    overflow: hidden;
    width: 100%;
} 
.jqfree li
{
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    height: 860px;
} 
.jqfree .text
{
    position: relative;
    height: 100%;
} 
.jqfree .text .info
{
    position: absolute;
    bottom: -200px;
    right: 15px;
    color: #fff;
    opacity: 0;
    transition-delay: 200ms;
    transition: 800ms;
} 
.jqfree .active .text .info
{
    position: absolute;
    bottom: 100px;
    right: 15px;
    color: #fff;
    opacity: 1;
} 
.jqfree .text .info h1
{
    font-size: 30px;
    padding: 15px 0;
    margin-bottom: 10px;
    display: inline-block;
    text-shadow: 2px 0 6px rgba(0, 0, 0, .55);
}
.jqfree .text .info h1 a
{
    color: #fff;
}
.jqfree .text .info h1 a:hover
{
    color: #1590dc;
}
.jqfree .text .info p
{
    line-height: 1.7;
    font-size: 18px;
    text-shadow: 2px 0 6px rgba(0, 0, 0, .55);
    position: relative;
} 
.jqfree .bx-controls
{
    position: absolute;
    align-items: center;
    width: 100%;
    bottom: 0;
    text-align: center;
}
.jqfree .bx-controls .bx-pager
{
    position: relative; 
}
.jqfree .bx-controls .bx-pager-item
{
    margin: 34px 12px;
    display: inline-block;
}
.jqfree .bx-controls .bx-pager-item a
{
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fff;
    text-indent: 999em;
    position: relative;
}
.jqfree .bx-controls .bx-pager-item a.active
{
    background-color: #1590dc;
}