星空网 > 软件开发 > 网页设计

第十篇.bootstrap轮播

使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js.

<div id="carousel-example-generic" data-ride="carousel">

            <!—轮播导航 -->

 

             <ol >

                <li data-target="#carousel-example-generic" data-slide-to="0" ></li>

                <li data-target="#carousel-example-generic" data-slide-to="1"></li>

                <li data-target="#carousel-example-generic" data-slide-to="2"></li>

            </ol>

 

            <!—轮播项目 -->

            <div role="listbox">

                <div >

 

 

                    <img src='/images/loading.gif' data-original="~/images/Chrysanthemum.jpg" />

                    <div >

                        ffffffff

                    </div>

                </div>

                <div >

 

                    <img src='/images/loading.gif' data-original="~/images/Desert.jpg" />

                    <div >

                        xxxxxxxxxxxxxxxx

                    </div>

                </div>

                <div >

 

 

                    <img src='/images/loading.gif' data-original="~/images/Lighthouse.jpg" />

                    <div >

                       mmmmmmmmmmmm

                    </div>

                </div>

            </div>

 

            <!—轮播导航 -->

            <a href="#carousel-example-generic" role="button" data-slide="prev">

                <span ></span>

                <span >Previous</span>

            </a>

            <a href="#carousel-example-generic" role="button" data-slide="next">

                <span ></span>

                <span >Next</span>

            </a>

        </div>

 

效果如下:

第十篇.bootstrap轮播

 




原标题:第十篇.bootstrap轮播

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流