Bootstrap轮播插件

Love The Way You Lie 2022-06-12 06:58 309阅读 0赞

> 轮播插件就是将几张同等大小的大图，按照顺序依次播放

<div id="myCarousel" class="carousel slide" style="width:690px;">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/11.jpg" alt="第一张">
                <div class="carousel-caption">
                    <h3>Free</h3>
                    <p>I want to flee with the balloon</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/22.jpg" alt="第二张">
                <div class="carousel-caption">
                    <h3>Alone</h3>
                    <p>I'm not alone only when I miss you</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/33.jpg" alt="第三张">
                <div class="carousel-caption">
                    <h3>Yes,I do</h3>
                    <p>Marry me,please</p>
                </div>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
    </div>

data属性解释：  
1.data-slide接受关键字prev和next，用来改变幻灯片相对于当前位置的位置  
2.data-slide-to来向轮播底部创建一个原始滑动索引，data-slide-to=”2”将把滑动块移动到一个特定的索引，索引从0开始计数  
3.data-ride=”carousel”属性用户标记轮播在页面加载时开始动画播放  
效果图如下：  
![SouthEast][]  
![SouthEast 1][]

轮播插件自定义属性：  
![SouthEast 2][]

$('#myCarousel').carousel({
        // 设置自动播放--2s
        interval:2000,
        // 设置暂停轮播事件
        pause:'hover',
        // 只播一次
        wrap:false
    });

轮播插件提供的方法：  
![SouthEast 3][]

<button class="btn btn-default" id="cycle">开始</button>
    <button class="btn btn-default" id="pause">停止</button>
    <button class="btn btn-default" id="number">第二张</button>
    <button class="btn btn-default" id="prev">上一张</button>
    <button class="btn btn-default" id="next">下一张</button>
    
    
    
    $('#cycle').on('click',function(){
        $('#myCarousel').carousel('cycle');
    });
    $('#pause').on('click',function(){
        $('#myCarousel').carousel('pause');
    });
    $('#number').on('click',function(){
        $('#myCarousel').carousel(1);
    });
    $('#prev').on('click',function(){
        $('#myCarousel').carousel('prev');
    });
    $('#next').on('click',function(){
        $('#myCarousel').carousel('next');
    });

轮播插件事件：  
![SouthEast 4][]

$('#myCarousel').on('slide.bs.carousel',function(){ 
        alert('当调用slide实例方式时立即触发！');
    });
    $('#myCarousel').on('slid.bs.carousel',function(){ 
        alert('当轮播完成一个幻灯片触发');
    });

[SouthEast]: /images/20220612/fe1a9129cd0d4ddfae1a89a69a2aa5a3.png
[SouthEast 1]: /images/20220612/4ff122863e2548ad9d84dc681348cf18.png
[SouthEast 2]: /images/20220612/24057b491cca4d11a1ee707d19dae1c7.png
[SouthEast 3]: /images/20220612/326f983d06c54144a4551e6049ff577c.png
[SouthEast 4]: /images/20220612/c952486a6edd42d6b2ca4be58e2fed62.png